TanStackT
TanStack•4y ago•
2 replies
colossal-harlequin

React table value-based styling

I may be confused but it seems to me that in the former react-table v7 version, we used to have more control on the way the rows would be rendered. In the attached screenshot (codesandbox https://codesandbox.io/s/ancient-frog-rsx361), I'd rather have the styling set at the <td/> level, not its child (so that padding would look cleaner).

What's the right approach for this with v8 ?

Old version (<td/> would get its own cell-value-based styling getColumnProps + getCellProps) 
   <tbody {...getTableBodyProps()}>
            {page.map((row) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps(getRowProps(row))}>
                  {row.cells.map((cell) => (
                    <td
                      {...cell.getCellProps([
                        {
                          className: cell.column.className,
                          style: cell.column.style,
                        },
                        getColumnProps(cell.column),
                        getCellProps(cell),
                      ])}
                    >
                      {cell.render("Cell")}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>


New v8 version (<td/> styling no longer affected by cell value)
<tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
</tbody>




Thanks
CleanShot_2022-10-24_at_18.19.262x.png
Was this page helpful?