feat: column helper utility, deep accessorKey support

[tannerlinsley]

This PR adds a createColumnHelper utility that adds an extra level of intellisense and safety to column definitions. While column defs can still be defined as plain old javascript objects, this is the new preferred way of doing it.

const columnHelper = createColumnHelper<Person>()

const columns = [
  columnHelper.accessor('firstName', {
    cell: info => info.getValue(),
    footer: info => info.column.id,
  }),
  columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
    footer: info => info.column.id,
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: info => info.renderValue(),
    footer: info => info.column.id,
  }),
  columnHelper.accessor('visits', {
    header: () => <span>Visits</span>,
    footer: info => info.column.id,
  }),
  columnHelper.accessor('status', {
    header: 'Status',
    footer: info => info.column.id,
  }),
  columnHelper.accessor('progress', {
    header: 'Profile Progress',
    footer: info => info.column.id,
  }),
]

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
table	❌ Failed (Inspect)		Jul 20, 2022 at 3:26PM (UTC)

[tannerlinsley]

This PR also adds deep dot-notation accessorKey support. So you can do things like columnHelper.accessor('name.last', {...}), including first-class type support with autocomplete and inference.

[tmikeschu]

@tannerlinsley 👋 curious why dots are replaced with _ in the derived accessor key column id? Felt like overkill to file a bug so just wanted to ask here first.

I discovered this in having responsively hidden columns but my column ids weren't working because the accessor strings have dot notation but the column visibility replaces (only the first dot, btw).

https://github.com/TanStack/table/pull/4185/files#diff-ecfb42689379fb8b0ebe6328e01b25aba4a31d2d076b723ff9fcaf502ac9d0f7R94

Thanks!

[mshahzebraza]

So I faced this issue in the cell AND filterFn method.

I got the cell methods right but filterFn issue is still there.

Here's my usage

        filterFn: (row, id, filterValue) => {
            return row.getValue(id) // type unknown 
                .toString()
                .includes(filterValue);
        },

I can ofcourse cast it to a type but that's not the point.

---

P.S If you're wondering what was I doing wrong in the cell function. Here you go:
I was using the cell function like this

    colHelper.accessor((row) => row.health_timestamp, {
        id: 'health_timestamp',
        cell: ({row}) => <i>{row.getValue('health_timestamp')}</i>,
        header: () => <span>Last Name</span>,
    }),

I struggled to understand what was the fix lol.
Actually, I needed to user the getValue prop of the cell not the nested method of the row prop inside the cell method.

// New Code
    colHelper.accessor((row) => row.health_timestamp, {
        id: 'health_timestamp',
        cell: ({getValue}) => <i>{getValue()}</i>, // extracted `getValue` instead of `row`
        header: () => <span>Last Name</span>,
    }),