Overlays & Data

Table

A data table with sorting, pagination, selection, and filtering — wraps @tanstack/table-core.

fandry-table

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`columns`	`ColumnDef[]`	`[]`	Column definitions.
`data`	`RowData[]`	`[]`	Row data.
`enable-pagination`	`boolean`	`false`	Turns on page-size-driven pagination.
`enable-row-selection`	`boolean`	`false`	Turns on checkbox row selection.
`enable-global-filter`	`boolean`	`false`	Turns on a search box that filters all columns.
`messages`	`{ selectionStatus, selectRow, selectAll, pageStatus, paginationLabel, previousPage, nextPage }`	`{}`	Replaces the table's own text ("2 of 5 selected", checkbox names, the pagination's name, Previous/Next and "Page 1 of 3"), e.g. to translate it. Any key left out keeps its English default.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`toolbar`	The bar above the table that holds the search box, or the viewer's bar above the picture.
`container`	The scrolling box around the table.
`table`	The native `<table>`.
`caption`	The `<caption>`, or a picture's caption.
`header-row`	The header row.
`header-cell`	A header cell.
`selection-cell`	The checkbox cell of a row or of the header (also a `cell` or `header-cell`).
`sort-button`	The button in a sortable header cell.
`header-label`	A header's text.
`sort-indicator`	The sort arrow.
`row`	A body row.
`loading-row`	A placeholder row while loading (also a `row`).
`cell`	A body cell.
`empty-row`	The row shown when there are no rows (also a `row`).
`empty`	What shows when there is nothing to list.
`footer`	The bar under the table.
`selection-status`	The "n of m selected" text.
`pagination`	The wrapper of the pagination slot.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`selected`	The chosen option, a selected table row, or the selected tab.
`sorted`	A header cell whose column is sorted (also `ascending` or `descending`).
`ascending`	A header cell sorted low to high.
`descending`	A header cell sorted high to low.

<!-- template -->
<div class="brand">
  <fandry-table columns={columns} data={data} caption="Recent orders"></fandry-table>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
  --fd-bg-muted: 160 40% 96%;
  --fd-border: 160 30% 88%;
}

fandry-table::part(container) {
  border: 1px solid hsl(160 30% 88%);
  border-radius: 1rem;
}

fandry-table::part(caption) {
  padding: 0.75rem 1rem 0;
}

fandry-table::part(header-cell) {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(160 84% 22%);
}

fandry-table::part(row):hover {
  background: hsl(160 40% 97%);
}

Code

Link to section Code

<fandry-table
  columns={columns}
  data={data}
  caption="Team members"
  enable-pagination
></fandry-table>