A styling and sorting recipe layered over Shadix.Components.Table.

The shadcn "Data Table" example is not a standalone component: it is a guide for wiring TanStack Table (column defs, sorting, filtering, pagination, row selection, visibility) into the presentational Table primitives. This v1 is deliberately not a TanStack port. It is a thin set of helpers that render the chrome — a bordered container, sortable column-header buttons, and an optional pagination bar — on top of the existing Table components.

Scope and simplifications

• The consumer owns the data and all state. Your LiveView holds the rows, the current sort field/direction, and the current page; it does the actual sorting and slicing. These helpers only render the surface. There is no LiveView hook and no client-side state.
• You build the table yourself. data_table/1 is just a bordered wrapper: put a <Shadix.Components.Table.table> (with its own header/body) inside it. The recipe does not generate rows from column definitions.
• Sorting is "controlled". data_table_column_header/1 renders a button that shows the current sort direction for that column (via :sort, one of "asc", "desc", or nil) and runs the :on_sort JS you pass. Your handler decides the next state and re-renders with an updated :sort.
• Pagination is "controlled". data_table_pagination/1 renders prev/next buttons and a "Page X of Y" label. It enforces nothing; your :on_prev / :on_next handlers update the page and you pass :page / :total_pages back in. Buttons can be disabled via :prev_disabled / :next_disabled.

data-slots

• data-table — the bordered container <div>.
• data-table-column-header — the sortable header <button>.
• data-table-pagination — the pagination bar <div> (a labelled navigation landmark).

Accessibility

The sortable header is a plain <button> and intentionally does not carry aria-sort — that attribute is not allowed on <button>; it belongs on the columnheader (the <th>). If you want to expose the sort state to assistive technology via aria-sort, set it on the consuming <Shadix.Components.Table.table_head> (e.g. aria-sort="ascending"). The button instead conveys the sort control through an aria-label.

Example

<Shadix.Components.DataTable.data_table>
  <Shadix.Components.Table.table>
    <Shadix.Components.Table.table_header>
      <Shadix.Components.Table.table_row>
        <Shadix.Components.Table.table_head>
          <Shadix.Components.DataTable.data_table_column_header
            label="Name"
            sort={@sort_dir_for_name}
            on_sort={JS.push("sort", value: %{field: "name"})}
          />
        </Shadix.Components.Table.table_head>
      </Shadix.Components.Table.table_row>
    </Shadix.Components.Table.table_header>
    <Shadix.Components.Table.table_body>
      <Shadix.Components.Table.table_row :for={row <- @rows}>
        <Shadix.Components.Table.table_cell>{row.name}</Shadix.Components.Table.table_cell>
      </Shadix.Components.Table.table_row>
    </Shadix.Components.Table.table_body>
  </Shadix.Components.Table.table>
</Shadix.Components.DataTable.data_table>

<Shadix.Components.DataTable.data_table_pagination
  page={@page}
  total_pages={@total_pages}
  prev_disabled={@page <= 1}
  next_disabled={@page >= @total_pages}
  on_prev={JS.push("prev_page")}
  on_next={JS.push("next_page")}
/>