AdvancedTable

Source code

Name	Age
Alice	19
Bob	25

import { AdvancedTable } from "rfui-package";

#Basic

Name	Age
Alice	19
Bob	25

<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>
    </>
  )}
/>

#Passing props to <th>

Use the optional thProps property of columns.

Name	Age
Alice	19
Bob	25

<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>
    </>
  )}
/>

#Automatic sorting

Set sortType to "automatic" to enable automatic sorting. This is useful if you don't have paginated data.

Name	Age
Alice	19
Bob	25

<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);
  }}
/>

#Automatic sorting with nesting

When sortKey is a nested property like "firm.name" it will sort by eg. user.firm.name instead of user["firm.name"].

Name	Firm
Alice	Acme
Bob	Beta

<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>
    </>
  )}
/>

#Automatic sorting excluding last row

Often times a table will have some sort of "total" row at the bottom that you don't want to include in the sorting. Set shouldSortLastRow to false to exclude this row.

Name	Cost
Milk	5
Eggs	4
Bread	2
Total	11

<AdvancedTable
  sortType="automatic"
  columns={[
    { label: "Name", sortKey: "name" },
    { label: "Cost", sortKey: "cost" },
  ]}
  rows={[
    { name: "Milk", cost: 5 },
    { name: "Eggs", cost: 4 },
    { name: "Bread", cost: 2 },
    { name: "Total", cost: 11 },
  ]}
  buildRow={(row, _, isLastRow) => (
    <>
      <td className={isLastRow ? "font-bold" : ""}>{row.name}</td>
      <td className={isLastRow ? "font-bold" : ""}>{row.cost}</td>
    </>
  )}
  shouldSortLastRow={false}
/>

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.

Name	Age
Alice	19
Bob	25

<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}
/>

#URL-based sorting with custom href

Name	Age
Alice	19
Bob	25

<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}
/>

#Controlled sorting

Set sortType to "controlled" to enable controlled sorting. This will allow you to manually sort the table via the onSort prop.

Name	Age
Alice	19
Bob	25

<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);
          })
    );
  }}
/>

#Exclude column from sorting

To exclude a column from sorting, just omit sortKey. This applies to all sorting types. This example excludes the "Age" column.

Name	Age
Alice	19
Bob	25

<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>
    </>
  )}
/>

#With help icon

Name	Age
Alice	19
Bob	25

<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>
    </>
  )}
/>

#With help icon and sorting

Name	Age
Alice	19
Bob	25

<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>
    </>
  )}
/>

#Props

Prop	Required	Default	Type and notes
`columns`		-	`BaseColumn[] \|\| SortableColumn[]`
`rows`		-	`T[]`
`buildRow`		-	`(row: T, index: number) => ReactNode`
`getRowKey`	-	-	`(row: T) => string \| number` The purpose of this is to set `key` on the `tr` element. If `getRowKey` isn't provided it will fall back to using `row.id` if it is available and if not, to `index`.
`tableProps`	-	-	`Omit<TableType, "children">`