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: RowData) => (
    <>
      <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: RowData) => (
    <>
      <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: RowData) => (
    <>
      <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>
    </>
  )}
/>

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: RowData) => (
    <>
      <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: RowData) => (
    <>
      <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: RowData) => (
    <>
      <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 RowData] as string) ?? "";
            const bValue = (b[key as keyof RowData] 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>
    </>
  )}
/>

#Props

Prop	Required	Default	Type and notes
`columns`		-	`BaseColumn[] \|\| SortableColumn[]`
`rows`		-	`T[]`
`buildRow`		-	`(row: T) => 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">`