Column widths based on rem

[PrettyCoffee]

Hi! :)

I am currently working on building a Table component on top of react-table and have been running into an issue with the column sizing.
The column sizing documentation mentions at one point:

The column "sizes" are stored in the table state as numbers, and are usually interpreted as pixel unit values, but you can hook up these column sizing values to your css styles however you see fit.
https://tanstack.com/table/latest/docs/guide/column-sizing#column-widths

So I was assuming that there shouldn't be a problem to base everything in the table off rem values. This has been working pretty well with some adjustments, until working with column resizing. I can't get column resizing to work with rem units, no matter what I try.

I have checked out the column sizing state documentation and have been playing around with the onColumnSizingChange and onColumnSizingInfoChange handlers.
It seems like you can properly adjust the stored column sizes. However, the resizing handler internally uses pixel values which then result in an offset / initial jumping when dragging the resize handle. related table-core code

See this reproduction for what I am trying to achieve.

Now my questions are:

• Am I missing something?
• Is it an unintended missing feature, since using different units is mentioned in the docs?
• Should this be possible? / Will this ever be possible?

If this is not possible and will never be, I think it would be nice to have a comment on that in the documentation as well, something like However, using different css units is not supported by the built-in resizing feature.

PS: I love this library and am having a blast using it, keep up that great work! 🔥

[NiklasPor]

Hey @PrettyCoffee, just stumbled on this discussion. Did you find some workaround, I'm at exactly the same place 😄

[PrettyCoffee]

Unfortunately, I didn't find a solution for that and we switched to using pixel based values.

[hex2r]

@PrettyCoffee, you can define column width based on pixels. But on the render, you can convert pixels into rems. To do this, you need to get the computed font size of html element e.g getComputedStyle(document.querySelector('html')).fontSize, convert this value to a number (better use parseFloat). Table {width: convertPxToRems(table.getTotalSize())}. For th and td: { width: convertPxToRems(header.getSize())} and { width: convertPxToRems(column.getSize())} accordingly.
Enjoy! 😉

[hex2r]

@PrettyCoffee Here is the simple function you can use:

export default function convertPxToRems(px: number): string {
  const basicFontSize = parseFloat(
    getComputedStyle(document.querySelector("html")!).fontSize
  ) || 16;
  return `${px / basicFontSize}rem`;
}

[PrettyCoffee]

Hey @hex2r, thanks for mentioning this! :)

Initially we wanted to be able to pass rem values into the column definitions, which seems not to be possible due to how tanstack table works internally.
We actually ended up with something similar, since it is a pretty good solution. I should have mentioned that in this thread, but totally forgot about it. 😅