4 ms·

Every time I’m given a table mockup, it’s flexible column widths with a sticky header. It’s damn near impossible even with JavaScript.

wildrhythms 5y ago
100% agree. Also consider that tables, uniquely, size to their content. So a cell's width is actually the width of the widest cell in its column; the cell height is the height of the tallest cell in its row. It's a problem with so much hidden complexity, and people who come up with these beautiful table designs genuinely do not understand the hidden challenges of implementing it.
- robbiejs 5y ago
  Exactly, non-fixed row heights / column widths are a performance nightmare. I have managed to create a super fast Javascript Data Grid. There are many performance tricks, but the first thing I decided was to give each column a fixed with and each row a fixed height. Here's a One Million Cells demo that shows its performance: https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells.
fiddlerwoaroof 5y ago
You can do this all in CSS, if you’re willing to restyle all the table elements to use grid. I demoed this at my last job, and it worked pretty well. (This has its own trade offs)
- danielvaughn 5y ago
  We used to use tables to style things that should be grids, now we use grids to style what should be tables. Back to square one :)
- WickyNilliams 5y ago
  Just be careful of the accessibility doing this. You need to apply the correct role attributes at every level so it is understood by assistive technology to be a table. Screen readers give special treatment to tables to help users understand what is being presented. They also offer special commands to help navigating in a row or columnar fashion. You lose this all of this if you use non semantic elements. I believe semantics can even be lost if you change the css display property of an actual <table> element. Make sure to test whatever you do!
  - johangavle 5y ago
    Virtualized scrolling for performance reasons also adds another layer of complexity regarding accessibility. Since not all rows of the table/DataGrid are available in DOM
- robbiejs 5y ago
  I'm sure grid was faster than table, However, for real performance benefits, forget about <table> and forget about grid: you need absolutely positioned DOM nodes, and CSS transform/translate for animations. You'll end up with a Data Grid that renders faster than Google Sheets: https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells. (Dislaimer: I am the maker)
graderjs 5y ago
You might need table-layout:fixed and could also help to set a column width using colgroup col elements. I think that's what I'm doing on my little table component in this page:https://i5ik.github.io/_____/7guis/ https://i5ik.github.io/_____/7guis/
- tenaciousDaniel 5y ago
  That's why I included "flexible column widths" since it's definitely doable if you use a fixed layout table.
  - deleted 5y ago
    [deleted]
methyl 5y ago
I know it's not great for performance, but to get a sticky header and flexible column widths you can render two tables and contain one of them to show only the header which you can then wrap into a <div>, position absolutely to cover the top of the table and give position: sticky.
- madeofpalk 5y ago
  For sticky headers you can literally just put `position: sticky` on the thead now! https://codepen.io/chriscoyier/pen/WNpJewq https://codepen.io/chriscoyier/pen/WNpJewq

wildrhythms 5y ago

100% agree. Also consider that tables, uniquely, size to their content. So a cell's width is actually the width of the widest cell in its column; the cell height is the height of the tallest cell in its row. It's a problem with so much hidden complexity, and people who come up with these beautiful table designs genuinely do not understand the hidden challenges of implementing it.

robbiejs 5y ago
Exactly, non-fixed row heights / column widths are a performance nightmare. I have managed to create a super fast Javascript Data Grid. There are many performance tricks, but the first thing I decided was to give each column a fixed with and each row a fixed height. Here's a One Million Cells demo that shows its performance: https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells.

fiddlerwoaroof 5y ago

You can do this all in CSS, if you’re willing to restyle all the table elements to use grid. I demoed this at my last job, and it worked pretty well. (This has its own trade offs)

danielvaughn 5y ago
We used to use tables to style things that should be grids, now we use grids to style what should be tables. Back to square one :)
WickyNilliams 5y ago
Just be careful of the accessibility doing this. You need to apply the correct role attributes at every level so it is understood by assistive technology to be a table. Screen readers give special treatment to tables to help users understand what is being presented. They also offer special commands to help navigating in a row or columnar fashion. You lose this all of this if you use non semantic elements. I believe semantics can even be lost if you change the css display property of an actual <table> element. Make sure to test whatever you do!
- johangavle 5y ago
  Virtualized scrolling for performance reasons also adds another layer of complexity regarding accessibility. Since not all rows of the table/DataGrid are available in DOM
robbiejs 5y ago
I'm sure grid was faster than table, However, for real performance benefits, forget about <table> and forget about grid: you need absolutely positioned DOM nodes, and CSS transform/translate for animations. You'll end up with a Data Grid that renders faster than Google Sheets: https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells. (Dislaimer: I am the maker)

graderjs 5y ago

You might need table-layout:fixed and could also help to set a column width using colgroup col elements. I think that's what I'm doing on my little table component in this page:https://i5ik.github.io/_____/7guis/ https://i5ik.github.io/_____/7guis/

tenaciousDaniel 5y ago
That's why I included "flexible column widths" since it's definitely doable if you use a fixed layout table.
- deleted 5y ago
  [deleted]

methyl 5y ago

I know it's not great for performance, but to get a sticky header and flexible column widths you can render two tables and contain one of them to show only the header which you can then wrap into a <div>, position absolutely to cover the top of the table and give position: sticky.

madeofpalk 5y ago
For sticky headers you can literally just put `position: sticky` on the thead now! https://codepen.io/chriscoyier/pen/WNpJewq https://codepen.io/chriscoyier/pen/WNpJewq