How to use subRows and addExpandedRows ?

[hgoona]

Great package, though I'm still trying to get my head around using it. Unfortunately the demo REPLs don't seem to include example for my use case:

I'm trying to make a table with expandable rows where the subRow has a different data structure to the original rows.
ie: row: id, title, dateCreated, dateUpdated, chat_messages (chat_messages is an Array containing data for the sub rows>>> )
sub rows: user, content, dateCreated

Using the REPLs and Docs, so far I have the expandable row working: when i click on the expand (display) column, my row expands to display the subRows, and I can see the correct number of sub row rows are appearing in line with my input data. However the column data shown in the sub rows is incorrect (appearing as "undefined" with the exception of the dateCreated column - which I think indicates the subRow is presentation is matching the (primary) row settings for the columns)... How can I configure the subRow?

I've not managed to piece this scenario together yet.. Would greatly appreciate help! Been stuck with this one for many hours..

[hgoona]

My code so far:

const table = createTable(chatRecords, {
		sort: addSortBy(),
		filter: addColumnFilters(),
		sub: addSubRows({
			children: "chat_messages"
		}),
		expand: addExpandedRows()
	});

const columns = table.createColumns([
        table.display({
	        id: "expanded",
	        header: "Exp",
	        cell: ({ row }, { pluginStates }) => {
		        const { isExpanded, canExpand, isAllSubRowsExpanded } =
			        pluginStates.expand.getRowState(row);
		        return createRender(ExpandIndicator, {
			        depth: row.depth,
			        isExpanded,
			        canExpand,
			        isAllSubRowsExpanded
		        });
		        // return state?.pluginStates.expand.getRowState(row).isExpanded;
	        }
        }),
        // MAIN ROWS
        table.column({
	        header: "ID/ChatID",
	        accessor: "id"
        
	        // sub: {}
        }),
        table.column({
	        header: "Title/Content",
	        accessor: "title"
        }),
        table.column({
	        header: "Created",
	        accessor: "dateCreated"
        }),
        table.column({
	        header: "Updated",
	        accessor: "dateUpdated",
        }),
        // SUB ROWS from accessor: "chat_messages"
        // table.column({
        // 	header: "Content",
        // }),
        // table.column({
        // 	header: "Role",
        // 	accessor: "role",
        // }),
        // table.column({
        // 	header: "Content",
        // 	accessor: "content",
        // }),
        // table.column({
        // 	header: "Createda",
        // 	accessor: "dateCreated",
        // }),
]);

const { headerRows, rows, tableAttrs, tableBodyAttrs, pluginStates } =
table.createViewModel(columns);

const { expandedIds } = pluginStates.expand;

const { sortKeys } = pluginStates.sort;

[hgoona]

Hi @bryanmylee was wondering if my intent above may not be possible with this library, or if in fact its a simple thing to do?

intended outcome: the main data table is composed of rows:
columns = id | title | dateCreated | dateUpdated

when a row is clicked, I want it to display subRows:
columns = user | message | dataCreated

Was wondering if I could ask you for some pointers on where to look or get an example of how to do this??

[jannisrichter]

Looking for something similar, did you ever figure this out?