Appearance
Table ​
Loading...
<flint-table-pagination> ​
Table Pagination: pagination controls for tabular data.
- Tag:
<flint-table-pagination> - Class:
FlintTablePagination
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTablePagination } from 'flint-ui';Usage ​
html
<flint-table-pagination></flint-table-pagination>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
count | count | number | 0 | Total number of rows. |
page | page | number | 0 | Controlled current page (0-indexed). |
rowsPerPage | rows-per-page | number | 10 | Controlled rows per page. |
rowsPerPageOptions | rows-per-page-options | number[] | [5, 10, 25] | Available rows-per-page options. |
defaultPage | default-page | number | 0 | Uncontrolled default page (applied on first render). |
defaultRowsPerPage | default-rows-per-page | number | -1 | Uncontrolled default rows per page. |
showFirstLast | show-first-last | boolean | false | Show First/Last page buttons. |
labelRowsPerPage | label-rows-per-page | string | 'Rows per page:' | Label for the rows-per-page selector. |
Events ​
| Event | Detail | Description |
|---|---|---|
flint-pagination-page-change | — | Fired when the current page changes. |
flint-pagination-rows-per-page-change | — | Fired when rows per page changes. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-font-family | — |
--flint-text-color-muted | — |
--flint-border-color | — |
--flint-text-color | — |
--flint-hover-color | — |
<flint-table-sort-label> ​
- Tag:
<flint-table-sort-label> - Class:
FlintTableSortLabel
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableSortLabel } from 'flint-ui';Usage ​
html
<flint-table-sort-label></flint-table-sort-label>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | active | boolean | false | Whether this column is currently sorted. |
direction | direction | 'asc' | 'desc' | 'asc' | Sort direction when active. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
<flint-table-container> ​
flint-table-container
- Tag:
<flint-table-container> - Class:
FlintTableContainer
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableContainer } from 'flint-ui';Usage ​
html
<flint-table-container></flint-table-container>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
shadow | shadow | boolean | false | Applies a stronger box-shadow elevation. |
stickyHeader | sticky-header | boolean | false | Sticks the table header to the top on scroll. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-table-container-bg | var(--flint-surface-background, white |
<flint-table> ​
flint-table
- Tag:
<flint-table> - Class:
FlintTable
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTable } from 'flint-ui';Usage ​
html
<flint-table></flint-table>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
size | size | 'medium' | 'small' | 'medium' | Cell padding density. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-table-striped-bg | var(--flint-surface-2 |
--flint-table-cell-padding-y | 16px |
--flint-table-cell-padding-x | 16px |
--flint-table-border-color | var(--flint-border-color |
--flint-table-header-bg | transparent |
--flint-table-header-color | var(--flint-text-color-muted |
--flint-table-container-bg | var(--flint-surface-background, white |
--flint-table-border-radius | var(--flint-border-radius-lg, 8px |
--flint-table-shadow | var(--flint-shadow-sm |
--flint-table-shadow-elevated | var(--flint-shadow-md |
--flint-table-row-hover-bg | var(--flint-hover-color, rgba(0, 0, 0, 0.04 |
--flint-table-row-selected-bg | var(--flint-primary-color-light, rgba(59, 130, 246, 0.08 |
--flint-table-cell-padding-y-dense | 6px |
--flint-table-cell-padding-x-dense | 16px |
<flint-table-head> ​
flint-table-head
- Tag:
<flint-table-head> - Class:
FlintTableHead
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableHead } from 'flint-ui';Usage ​
html
<flint-table-head></flint-table-head>Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-table-header-bg | transparent |
--flint-table-header-color | var(--flint-text-color-muted |
<flint-table-body> ​
flint-table-body
- Tag:
<flint-table-body> - Class:
FlintTableBody
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableBody } from 'flint-ui';Usage ​
html
<flint-table-body></flint-table-body>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
striped | striped | boolean | false | Enables alternating row shading. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
<flint-table-row> ​
flint-table-row
- Tag:
<flint-table-row> - Class:
FlintTableRow
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableRow } from 'flint-ui';Usage ​
html
<flint-table-row></flint-table-row>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
selected | selected | boolean | false | Highlights the row as selected. |
hover | hover | boolean | false | Forces hover highlight on the row. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-table-row-hover-bg | var(--flint-hover-color, rgba(0, 0, 0, 0.04 |
--flint-table-row-selected-bg | var(--flint-primary-color-light, rgba(59, 130, 246, 0.08 |
<flint-table-cell> ​
flint-table-cell
- Tag:
<flint-table-cell> - Class:
FlintTableCell
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableCell } from 'flint-ui';Usage ​
html
<flint-table-cell></flint-table-cell>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
header | header | boolean | false | Renders the cell with header styling. |
align | align | 'left' | 'right' | 'center' | 'left' | Text alignment within the cell. |
padding | padding | 'normal' | 'checkbox' | 'none' | 'normal' | Padding preset for the cell. |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-table-cell-padding-y | 16px |
--flint-table-cell-padding-x | 16px |
--flint-table-cell-padding-y-dense | 6px |
--flint-table-cell-padding-x-dense | 16px |
<flint-table-footer> ​
flint-table-footer
- Tag:
<flint-table-footer> - Class:
FlintTableFooter
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintTableFooter } from 'flint-ui';Usage ​
html
<flint-table-footer></flint-table-footer>Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |