absent-sapphire

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

fascinating-indigo•2y ago

minWidths?

absent-sapphireOP•2y 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 ...

fascinating-indigo•2y ago

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

evident-indigo•2y ago

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

fascinating-indigo•2y 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:

fascinating-indigo•2y 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*/ }}
>

evident-indigo•2y ago

thanks! but column still is wider than minSize.

fascinating-indigo•2y ago

well, that's how min-width css works

evident-indigo•2y ago

yep, i know (

Gaming

Programming

Stop table header shifting ...

Did you find this page helpful?