3 ms·
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
by 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 agoWe 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 agoJust 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 agoVirtualized 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 agoI'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)