columns

contentBefore

cursor

Custom component to render instead of the table

customComponent

data

Enable expandable table rows by indicating rows that can be expanded
Return list of new rows to make a individual row expandable

expandable

expanded

filters

hideSortMenu

Table id that is used for persisted table state

label

onExpand

onFilter

onQuery

page

query

resize

rowProps

search

searchRules

Enable selectable table rows by indicating rows that can be selected

selectable

selected

sort

sortRules

() => {
  /**
   * Implemented differently depending of router implementation
   */
  const onSearchQueryUpdate = useCallback((searchQuery: string) => {
    const url = new URL(window.location.href);
    url.search = searchQuery;
    window.history.pushState({}, '', url); // Update the URL
  }, []);

  return (
    <TableWithFilter
      {...filterConfiguration}
      onQuery={onSearchQueryUpdate}
      data={[
        { id: '1', name: 'John Doe', status: 'available', createdAt: '2024-01-02' },
        { id: '2', name: 'Jane Doe', status: 'terminated', createdAt: '2024-01-01' }
      ]}
    />
  );
}

TableWithFilter

Name	Description	Default
columns required	Table columns	-
contentBefore	Component to render before search input	-
cursor	Initial cursor value	-
customComponent	Custom component to render instead of the table	-
data required	Table data	-
expandable	Enable expandable table rows by indicating rows that can be expanded Return list of new rows to make a individual row expandable	-
expanded	Expanded table rows	-
filters	Table data filter options	-
hideSortMenu	Hide sort menu	-
id required	Table id that is used for persisted table state	-


1	John Doe	available	2024-01-02
2	Jane Doe	terminated	2024-01-01

Table With Filter component