<AdvancedTable
columns={["Name", "Age"].map((c) => ({ label: c }))}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
/>
Use the optional thProps property of columns.
<AdvancedTable
columns={[
{
label: "Name",
},
{
label: "Age",
thProps: {
className: "text-right",
},
},
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td className="text-right">{row.age}</td>
</>
)}
/>
Set sortType to "automatic" to enable automatic sorting. This is useful if you don't have paginated data.
<AdvancedTable
sortType="automatic"
columns={[
{ label: "Name", sortKey: "name" },
{ label: "Age", sortKey: "age" },
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
onSort={(sortKey, sortType) => {
console.log(sortKey, sortType);
}}
/>
When sortKey is a nested property like "firm.name" it will sort by eg. user.firm.name instead of user["firm.name"].
<AdvancedTable
sortType="automatic"
columns={[
{ label: "Name", sortKey: "name" },
{ label: "Firm", sortKey: "firm.name" },
]}
rows={[
{ name: "Alice", firm: { name: "Acme" } },
{ name: "Bob", firm: { name: "Beta" } },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.firm.name}</td>
</>
)}
/>
Set sortType to "url" to enable URL-based sorting. This will add an <a> to the header of each column with an href based on the current URL and with sort and direction added as query params.
<AdvancedTable
sortType="url"
columns={[
{ label: "Name", sortKey: "name" },
{ label: "Age", sortKey: "age" },
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
sortKey={null}
sortDirection={null}
/>
<AdvancedTable
sortType="url"
columns={[
{ label: "Name", sortKey: "name" },
{ label: "Age", sortKey: "age" },
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildHref={(key, direction) =>
`/users?sort=${key}&direction=${direction}`
}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
sortKey={null}
sortDirection={null}
/>
Set sortType to "controlled" to enable controlled sorting. This will allow you to manually sort the table via the onSort prop.
<AdvancedTable
sortType="controlled"
columns={[
{ label: "Name", sortKey: "name" },
{ label: "Age", sortKey: "age" },
]}
rows={rows}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
sortKey={sortKey}
sortDirection={sortDirection}
onSort={(key, direction) => {
setSortKey(key);
setSortDirection(direction);
setRows(
key === null
? initialRows
: [...rows].sort((a, b) => {
const aValue = (a[key as keyof typeof a] as string) ?? "";
const bValue = (b[key as keyof typeof b] as string) ?? "";
return direction === "asc"
? aValue.localeCompare(bValue)
: bValue.localeCompare(aValue);
})
);
}}
/>
To exclude a column from sorting, just omit sortKey. This applies to all sorting types. This example excludes the "Age" column.
<AdvancedTable
sortType="automatic"
columns={[{ label: "Name", sortKey: "name" }, { label: "Age" }]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row: RowData) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
/>
<AdvancedTable
columns={[
{
label: "Name",
helpTooltipContent: "Some help text to explain something",
},
{
label: "Age",
},
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
/>
<AdvancedTable
sortType="automatic"
columns={[
{
label: "Name",
sortKey: "name",
helpTooltipContent: "Some help text to explain something",
},
{
label: "Age",
sortKey: "age",
},
]}
rows={[
{ name: "Alice", age: 19 },
{ name: "Bob", age: 25 },
]}
buildRow={(row) => (
<>
<td>{row.name}</td>
<td>{row.age}</td>
</>
)}
/>