pagination is an optional prop that can be used to add pagination to the AdvancedTable. If present, it will add pagination with default values for pageSize, etc. To customize pagination, you can also use paginationProps shown in the next example.
paginationProps is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
pageIndex: An optional prop to set which page is set to open on initial load. Default is '0'pageSize: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'range: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See here for more details. Default is set to '5'onPageChange: A callback function that gives to access to the current page index.The optional loading prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional initialLoadingRowsCount prop can be used to pass in a number. NOTE: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the inlineRowLoading prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty children array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty children arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
This prop is set to false by default.
The persistToggleExpansionButton is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty children arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without persistToggleExpansionButton in place. The third Advanced Table shows the toggle all button due to persistToggleExpansionButton.
This prop is set to false by default and should only be used in conjunction with inlineRowLoading.
The virtualizedRows boolean prop enables the rendering of a virtualized table using Tanstack's Virtualizer Library with infinite scroll capabilities for large data sets.
Note: Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the Pagination version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.
