T
TanStack•3y ago
extended-salmon

How to get custom props in v8 (like getHeaderProps & getCellProps in v7)

Previously, I'd be able to add custom props to a column definition like so: 
id: 'column-id',
        Header: ({ column }) => {
          return (
            <span>
              <SortableHeader isSorted={column.isSorted} isSortedDesc={column.isSortedDesc}>
                {column-string}
              </SortableHeader>
            </span>
          );
        },
        thCustomProps: { // Custom props
          tabIndex: 0,
          className: `${styles['table-header']} ${styles['custom-style']}`,
        },
id: 'column-id',
        Header: ({ column }) => {
          return (
            <span>
              <SortableHeader isSorted={column.isSorted} isSortedDesc={column.isSortedDesc}>
                {column-string}
              </SortableHeader>
            </span>
          );
        },
        thCustomProps: { // Custom props
          tabIndex: 0,
          className: `${styles['table-header']} ${styles['custom-style']}`,
        },
And then access that custom thCustomProps like this: 
 <th
                    {...column.getHeaderProps([
                      {
                        ...column.thCustomProps, // Here - this spreads out tabIndex and className from the above declaration
                        scope: 'col',
                        id: column.id,
                      },
                    ])}
                  >
                    {column.render('Header')}
                  </th>
 <th
                    {...column.getHeaderProps([
                      {
                        ...column.thCustomProps, // Here - this spreads out tabIndex and className from the above declaration
                        scope: 'col',
                        id: column.id,
                      },
                    ])}
                  >
                    {column.render('Header')}
                  </th>
If I try to do this in V8, not only do these getXProps functions not exist, but Typescript is relatively upset that I'm adding things to DisplayColumnDef that do not exist. Is there a way to implement this kind of functionality in V8? Thanks!
1 Reply
adverse-sapphire
adverse-sapphire•3y ago
meta should be what you are looking for: https://tanstack.com/table/v8/docs/api/core/column-def#meta
ColumnDef | TanStack Table Docs
Column definitions are plain objects with the following options: Options

Did you find this page helpful?