Column widths based on rem #5460

PrettyCoffee · 2024-04-02T17:15:54Z

PrettyCoffee
Apr 2, 2024

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! 🔥

Answered by hex2r

Apr 29, 2025

@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`;
}

View full answer

NiklasPor · 2025-01-17T09:28:42Z

NiklasPor
Jan 17, 2025

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

4 replies

PrettyCoffee Jan 17, 2025
Author

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

hex2r Apr 29, 2025

@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 Apr 29, 2025

@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`;
}

Answer selected by PrettyCoffee

PrettyCoffee Apr 29, 2025
Author

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. 😅

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Column widths based on rem #5460

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Column widths based on rem #5460

PrettyCoffee Apr 2, 2024

Replies: 1 comment · 4 replies

NiklasPor Jan 17, 2025

PrettyCoffee Jan 17, 2025 Author

hex2r Apr 29, 2025

hex2r Apr 29, 2025

PrettyCoffee Apr 29, 2025 Author

PrettyCoffee
Apr 2, 2024

Replies: 1 comment 4 replies

NiklasPor
Jan 17, 2025

PrettyCoffee Jan 17, 2025
Author

PrettyCoffee Apr 29, 2025
Author