I'm going to be making a table library (think DataTables)

So for those web dev gurus, should I render the data to a basic <table> or should I use CSS grids?

IE compatibility is not a consideration.

The table will also support grouping (pivot table) so something like rowspan will be a must

I need the most flexibility with layout options. Fixed, sticky headers. Repeating headers. Fixed headers, scrolling table body, fixed table footer. Nothing fixed, auto height table. Pagination animations. Etc.

I want to be limited by what I'm smart enough to do, not what the HTML elements support

If I can make a wish....

Stop trying to make tables / data content responsible.

It always ends in clusterfuck.

I absolutely hate dynamic tables and their most futile attempts to "wrap smartly".

No, table won't be an option with what you're trying to do. Grid layout might be just too rigid too, especially for animations. The good option I see is to just use absolute positioning that will calculate everything in JS. If you need it to be responsive, it's a good time to live in, because we have matchMedia:

const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {

if (e.matches) {

console.log('Media Query Matched!')

}

}

mediaQuery.addListener(handleTabletChange)

Here's more info on that: https://css-tricks.com/working-with...

Don't worry. It will be okay. Yes, going absolute is bad if you're writing code manually, but if you're also going meta, e.g. you write JS that writes CSS, it will work out fine. After all, this is similar to what the browser is doing under the hood.

This is a very common tactic in stuff like D3.

Mention me at any time if you need anything UwU

About what @IntrusionCM said, it is indeed a hard task. I always just add horizontal scrolling to the table, so it's legible and comprehensible.

It takes a designer really to make a responsive table look good. If you figure out the layout that humans can understand and instantly derive the same knowledge as if it was a conventional table, you'll be the champion.

With the approach I suggested, at least you have the technical means to achieve this.

Good luck!

@kiki I had figured that if I wanted something entirely custom I would need to abandon the built-in things.

Logic would dictate that if it needed to be built, it has not already been built.

I want to meet and surpass things like datatable and compete with paid controls like Kendo UI/ Telerik grids.

Just one thing I never understood about matchMedia: whats the advantage over using that rather than just checking, for example, window.innerWidth?

Both would require a listener, on one end, we would listen for resize on window. On the other, we would add a listener to the media match object. So what's the purpose, besides what I can only imagine is a performance hit from compiling and evaluating the CSS string rather than an integer comparison

@AlgoRythm you're right. Just measuring window width must be good. Better even, on resize event, you can check your table's actual width, as it's more important. matchMedia is way more sophisticated, as media queries go way beyond merely checking width.

Put your data in a HTML table for accessibility, then use whatever @kiki recommends for layout.

@kiki I have had no luck with CSS grids for some reason

if u wanna be reasonable and rhus forgotten, use table element.

if u wanna be the next hip successful pile of shit fad, i mean thing, use css grid