eastern-cyan

Stop table header shifting ...

Hey all, I just wondered what strategies people were employing to stop table headers from shifting so much when loading in data ... I'd be curious to see what people are employing ...

9 Replies

adverse-sapphire•16mo ago

minWidths?

eastern-cyanOP•16mo ago

Is that something that can be added in the columns declaration, or do you implement via css? I've tried the minSize and maxSize route within the columns declaration, but there is still a tonne of shifting. I was thinking I might apply my own grid styles ...

adverse-sapphire•16mo ago

minSize and maxSize will have no effect unless you actually apply them in your CSS/styles to the headers.

other-emerald•16mo ago

can you please show an example? Did`nt saw any in documentation

adverse-sapphire•16mo ago

https://tanstack.com/table/latest/docs/guide/column-sizing#connect-column-resizing-apis-to-ui

Column Sizing Guide | TanStack Table Docs

Examples Want to skip to the implementation? Check out these examples:

adverse-sapphire•16mo ago

thought it should be self explanatory

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px`, minWidth: `${header.column.columnDef.minSize}px`, /*etc*/ }}
>

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px`, minWidth: `${header.column.columnDef.minSize}px`, /*etc*/ }}
>

other-emerald•16mo ago

thanks! but column still is wider than minSize.

adverse-sapphire•16mo ago

well, that's how min-width css works

other-emerald•15mo ago

yep, i know (

Gaming

Programming

Stop table header shifting ...

Did you find this page helpful?