Story - Table

[asgeir-s]

There are going to be a lot of different variations that already exist in the different Zodiac products. Let's try and keep the variations to a minimum here, and be as utility-first as possible.

https://www.figma.com/file/AvINcCSvNLnAx2mKAQH6fn/Zodiac-Design-System?node-id=7%3A329

• [ ] Table Head
• [ ] Table Cell

[asgeir-s]

@cedricwaxwing: The MUI Table looks something like this:

      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
           ...
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
             </TableRow>
          ))}
        </TableBody>
      </Table>

Were you thinking that we expose each of the components types TableHeader, TableRow, TableCell, etc.? Or Should we have a standard interface where we provide it all via a Table component where the user only provides an array of headings and an array or arrays of data or something like that (losing access to setting tooltips, links, etc.)?

Could an alternative approach be to expand the MUI theme and utilize style overrides (https://v4.mui.com/customization/globals/#css) were needed? Or do we need more control? Basically, could we expand the global zodiac theme instead of wrapping them in our own components?