A Material Design table (pp_table/1) — renders a <table>, composed
with PhoenixPaper.TableHead/PhoenixPaper.TableBody/
PhoenixPaper.TableRow/PhoenixPaper.TableCell (and optionally
PhoenixPaper.TableFooter, PhoenixPaper.TableContainer):
<.pp_table_container>
<.pp_table>
<.pp_table_head>
<.pp_table_row>
<.pp_table_cell variant="head">Name</.pp_table_cell>
<.pp_table_cell variant="head" align="right">Amount</.pp_table_cell>
</.pp_table_row>
</.pp_table_head>
<.pp_table_body>
<.pp_table_row>
<.pp_table_cell>Coffee</.pp_table_cell>
<.pp_table_cell align="right">$4.50</.pp_table_cell>
</.pp_table_row>
</.pp_table_body>
</.pp_table>
</.pp_table_container>dense and sticky_header are set once here and reach every cell/head via
plain CSS descendant selectors ([&_td]:...), not by threading an attr
through every TableCell — unlike MUI, HEEx has no context mechanism to
cascade a prop from Table down to children TableCells a caller wrote
themselves (see PhoenixPaper.ButtonGroup's moduledoc for the same
limitation), but a CSS descendant selector doesn't care about component
boundaries, only real DOM nesting — so it works here where it couldn't for
ButtonGroup's color/variant (there's no single class that could express
"make this children's color prop secondary").
TableCell still carries its own sensible default padding, so cells look
right when rendered outside a Table too (e.g. in isolation in tests) —
Table's descendant selectors just override it via the extra specificity a
compound selector gets over a bare utility class.
Summary
Functions
Renders a table. See the module doc.
Functions
Renders a table. See the module doc.
Attributes
paperize(:boolean) - Defaults totrue.dense(:boolean) - tighter vertical cell padding, applied to every descendant th/td. Defaults tofalse.sticky_header(:boolean) - pins TableHead to the top of the nearest scrolling ancestor, e.g. TableContainer. Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)