PhoenixPaper.Table (PhoenixPaper v0.1.0)

Copy Markdown View Source

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

pp_table(assigns)

Renders a table. See the module doc.

Attributes

  • paperize (:boolean) - Defaults to true.
  • dense (:boolean) - tighter vertical cell padding, applied to every descendant th/td. Defaults to false.
  • sticky_header (:boolean) - pins TableHead to the top of the nearest scrolling ancestor, e.g. TableContainer. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)