[RFC] How to implement a table in a world of atoms and molecules?
By definition, an atom is something that can be reused in another molecule.
Looking at the examples from @jure and Alex P. we see that there can be action inside the table, like removing a line (deleting a user for example), or change the status of another one. Therefore, the table will import atom or molecules inside its cells.
Tables are made of cells, which can be looked at like the atom of the molecule table. The problem of doing so is that, unlike a label
for example, a cell will not be usable outside of a table.
Therefore, a cell is not an atom in itself.
More, based on MDN, tables can/should have:
- an optional
<caption>
element, which is the title of the table; - zero or more
<colgroup>
elements that let you describe the columns spanning of your table - an optional
<thead>
element for the heading of each column; - zero or more
<tbody>
elements which define the actual body of the table; - one or more
<tr>
elements to define a row; - an optional
<tfoot>
element for the footer rows of the table
We can have a different atom for each type of cell. This would mean that we will have either an atom that will have all the styling for all the variants (aligned-right for numbers, background for the header cells), or we will have one atom for each need.
HTML is already well describing tables, using thead
, tr
, td
and th
. I believe that a well made set of css rules would be easier to use and maintain (even with responsible tables) than having all the options inside components.
More than that, the table are editorialized content, and therefore, will be harder to reuse amongst different applications.
That's why i would declare tables as a molecule that can use atoms inside it cells (like a button
or a link
).