NOTE: The Advanced Table kit uses the Tanstack Table v8 under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, the kit has two required props:
tableData accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row. Each parent row is prepended with expansion controls for toggling its nested child rows. The toggleExpansionAll button in the first column header can also be used to toggle expansion of all parent rows within the table.
For a visual of the data structure needed for tableData, see here.
columnDefinitions maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. ColumnDefinitions in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
accessor: this is the key from your data for the value you want rendered in that columnlabel: this is what will be rendered as the column header labelThere is also one optional item that is only required if the table has nested data:
cellAccessors: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional tableOptions can be used to pass tanstack options to the kit.
In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see here
This kit uses the Table kit under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional tableProps prop. This prop must be an object that contains valid Table props. For a full list of Table props, see here.
This doc example showcases the use of two table props, including how to render the vertical borders between columns.
