npm package: @iceblizz6/mantine-datatable
Description: A forked version of mantine-datatable for the slightly less insane
Latest version: 8.3.18

# Mantine DataTable

Forked version of [mantine datatable](https://bundlephobia.com/package/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)

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