TanStackT
TanStack•4y ago•
1 reply
technological-jade

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']}`,
        },


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>


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!
Was this page helpful?