Data Table

A bordered table wrapper with sortable column headers and an optional controlled pagination bar.


ken99@example.com	Success	$316.00
abe45@example.com	Success	$242.00
monserrat44@example.com	Processing	$837.00

<.data_table></.data_table>

Examples

With pagination

Table with a pagination bar below it.


INV-001	Paid	$250.00
INV-002	Pending	$150.00
INV-003	Paid	$350.00

<div>
  <.data_table>
    <.table>
      <.table_header>
        <.table_row>
          <.table_head>
            <.data_table_column_header label="Invoice" sort="desc" />
          </.table_head>
          <.table_head>
            <.data_table_column_header label="Status" />
          </.table_head>
          <.table_head class="text-right">
            <.data_table_column_header label="Amount" class="ml-auto" />
          </.table_head>
        </.table_row>
      </.table_header>
      <.table_body>
        <.table_row>
          <.table_cell>INV-001</.table_cell>
          <.table_cell>Paid</.table_cell>
          <.table_cell class="text-right">$250.00</.table_cell>
        </.table_row>
        <.table_row>
          <.table_cell>INV-002</.table_cell>
          <.table_cell>Pending</.table_cell>
          <.table_cell class="text-right">$150.00</.table_cell>
        </.table_row>
        <.table_row>
          <.table_cell>INV-003</.table_cell>
          <.table_cell>Paid</.table_cell>
          <.table_cell class="text-right">$350.00</.table_cell>
        </.table_row>
      </.table_body>
    </.table>
  </.data_table>
  <.data_table_pagination page={1} total_pages={4} prev_disabled={true} next_disabled={false} />
</div>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot