Mantine DataTable

Forked version of mantine datatable for the slightly less insane.

Changes include

• accessor prop replaced by uniqueKey
  • You can now include columns that are not related to any specific properties of your records
  • Only used to track columns, this was previously done by accessor. But this prop will not be used to perform any operations on your records.
  • This library will never try to extract values from your records based on unchecked arbitrary strings
• idAccessord replaced by uniqueRecordKey
  • No longer implicitly assumes your record objects has an id prop, now you just tell it what the unique row identifier is based on a function
• Type safe sorting
  • Columns still takes in sort keys like earlier, but they are now constrained to your supplied sort key type.
• render prop now required
• title prop required
  • No longer tries to make up titles based on what it thinks you may want, now you just tell it what the title is!

Sorting example using ts-pattern:

• (you can use switch-case, but with a bit more code bloat)

'use client';

// imports here..

type Sort = "name" | "streetAddress" | "city" | "state"

export default function SortingExample() {
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Company, Sort>>({
    uniqueKey: "name",
    sortKey: "name",
    direction: 'asc',
  });
  const [records, setRecords] = useState(companies.toSorted((a, b) => a.name.localeCompare(b.name)));

  useEffect(() => {
    const data = match(sortStatus.sortKey)
      .with("name", () => companies.toSorted((a, b) => a.name.localeCompare(b.name)))
      .with("city", () => companies.toSorted((a, b) => a.city.localeCompare(b.city)))
      .with("streetAddress", () => companies.toSorted((a, b) => a.streetAddress.localeCompare(b.streetAddress)))
      .with("state", () => companies.toSorted((a, b) => a.state.localeCompare(b.state)))
      .exhaustive();
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
  }, [sortStatus]);

  return (
    <DataTable
      withTableBorder
      withColumnBorders
      records={records}
      uniqueRecordKey={(el) => el.id}
      columns={[
        { 
          uniqueKey: 'name',
          title: "Name",
          width: '40%',
          render: (el) => el.name,
          sortKey: "name"
        },
        { 
          uniqueKey: 'streetAddress',
          title: "Street address",
          width: '60%',
          render: (el) => el.streetAddress,
          sortKey: "streetAddress" 
        },
        { 
          uniqueKey: 'city',
          title: "City",
          width: 160,
          render: (el) => el.city,
          sortKey: "city" 
        },
        { 
          uniqueKey: 'state',
          title: "State", 
          textAlign: 'right', 
          render: (el) => el.state, 
          sortKey: "state" 
        },
      ]}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
    />
  );
}