Discussion on the use of tables in Sanity UI and why they may be an anti-pattern.

Is there some component or styling for HTML tables in sanity-ui? I guess not, but I just wanted to be sure. Otherwise I'll go with react-table.

we tend to avoid table components (and styling of HTML), because they often are a structured content anti-pattern - but there are a couple of plugins around.

Do you have any references that explains why it is often an anti-pattern?

A table is essentially an array of objects containing arrays, so the first array may be "rows" containing an object with an array of "cells" for that row. Adding a "column" in this case means adding an extra cell to the nested array of each row - always in the same position.
I guess one reservation around tables may come from the 'obligation' to keep the nested arrays in sync between the different rows to keep the table intact, which could give its challenges when updating through the HTTP API or when dealing with complex objects inside of cells.

I guess that doesn't fully explain why it would be an anti-pattern though
🙂

1. Often people use tables for layout control. But make the data / content less accessible/queryable and are moving presentation concerns into the content model2. What one often wants is a
table view for typed data (array of named objects). But these table plugins, as Peter points out, gives you generic matrix data.Take our API reference docs. There's a bunch of tables there in the frontend, but in the backend it's arrays of objects that describes API methods as typed fields. That means we can query in much more sophisticated and directed ways than if we had those as generic tables.

oh! now I understand your first reply. I should have been more specific: I wasn't building a custom form input, but a new screen inside the Studio where I display data in forms of graphs and tables. So yes, I totally agree with you on the notion of table view!In the meantime, I finished coding the table and I'm quite happy with the result, knowing this is my first "project" with React
😋Here's the code:
https://github.com/mornir/terminofeu-studio/blob/master/plugins/entries-stats/ApprovalTable.js

I'm quite fond of the Hooks API and the react-table library is just amazing!

– there are no primitives for building graphs/trees/sheets/tables yet, but will def consider it. It may be possible to use

@sanity/ui

in combination with some other libraries, since

@sanity/ui

consists mainly of very small building blocks / components.