PaginatedTable

Table and pagination agreement with filter.

Example

Props

🕹️ standard props
headers
Header<Data>[]
Defines the table columns.
[]
items
Item[]
Defines the table rows.
[]
sortedBy
string | undefined
Column currently sorted by.
undefined
sortDirection
'asc' | 'desc'
Current sorting direction.
asc
page
number
Current page number
1
maxPage
number
Maximum number of pages
undefined
rowsPerPageOptions
Item[]
Options for rows per page.
[{ label: '20', value: 20 }, { label: '50', value: 50 }, { label: '100', value: 100 }]
hideRowsPerPage
boolean
Whether to hide the rows-per-page selector.
false
totalElements
number | undefined
Total number of elements available.
undefined
rowsPerPage
number
Number of rows shown per page.
20
filters
Filter[]
Array of filters applied or available.
[]
searchBarColumns
string[] | undefined
Fields on which to perform search filtering.
undefined
searchBarVisible
boolean
Show or hide the search bar.
true
searchBarPlaceholder
string
Placeholder text for the search bar.
'Type something to search...'
lang
'it' | 'en'
Language of the UI.
'en'
noItemsText
string
Message to appear when there are no items
No data available
editFilterMode
'one-edit' | 'multi-edit'
Mode for editing filters.
'one-edit'
showActiveFilters
boolean
Show chips representing active filters.
true
multiEditTabs
Tab[]
Tabs for multi-edit filter mode.
resizableColumns
boolean
Enable or disable column resizing.
false
resizedColumnSizeWithPadding
Record<string, number>
Mapping of column names to custom widths.
{}
pointerOnRowHover
boolean | undefined
If true, shows pointer on row hover.
undefined
doubleClickActive
boolean
Enables the double click of the row.
false
doubleClickDelay
number
Time window (in ms) to double click
250
searchTimeoutDelay
number
Search debounce delay (ms)
300
showSelection
boolean
Shows selection at the start of each row
false
selectionMode
'single' | 'multiple'
Choose between one of multiple elements to select
'multiple'
hideSelectAll
boolean
Hides the select all for multiple selection
false
selectedAll
boolean
True if every row is selected
selectedItems
Item[]
Contains selected items. Empty if selectedAll is true
uniqueKey
keyof Item
Unique key for selecting items
id
hideActions
boolean
Hides quick actions
false
actionsForSelectedItems
Action
Actions for the selected items
calculateRowStyles
CalculateRowStyles<Item> | undefined
Function to calculate row styles.
undefined
calculateRowClasses
CalculateRowClasses<Item> | undefined
Function to calculate row classes.
undefined
class
{ simpleTable?: { container?: string, header?: string, row?: string, cell?: string } }
Custom class mappings for inner components.
{}
🎨 style props
--filters-one-edit-menu-max-height
string
The max height of the filters dropdown element when "one-edit" mode is active
100%

Slots

searchBarSnippet

Custom content for the search bar.

Available variables:

Name	Type	Description
handleSearchChange	function	Handler for search input changes.

footerSnippet

Custom footer content.

Available variables:

Name	Type	Description
hideRowsPerPage	boolean	If true, hides the rows-per-page dropdown.
rowsPerPageOptions	array	Available options for rows per page.
rowsPerPageSelection	function	Handler for changing rows per page.
totalElements	number	Total number of elements.
page	number	Current page.
maxPage	number	Maximum number of pages.
rowsPerPage	number	Current rows per page.
handlePaginationChange	function	Handles pagination changes.

rangeDescriptorSnippet

Custom snippet for describing current pagination range.

Available variables:

Name	Type	Description
totalElements	number	Total elements count.
page	number	Current page.
maxPage	number	Maximum page number.
rowsPerPage	number	Current rows per page.

customSnippet

Custom UI for editing a single filter.

Available variables:

Name	Type	Description
filter	Filter | undefined	Current filter being edited.
updateFunction	function	Updates the current filter.
mAndDown	boolean	True if screen size is medium or smaller.

customChipSnippet

Custom rendering of individual filter chip.

Available variables:

Name	Type	Description
filter	Filter	The filter to render.

filterAppendSnippet
Slot for appending additional elements to the filter component.
headerSnippet

Custom rendering for table headers.

Default content:

<span class="header-label">
  {#if headerLabelSnippet}
    {@render headerLabelSnippet({ head })}
  {:else}
    {#if !!head.icon}
      <Icon name={head.icon}/>
    {/if}
    {head.label}
  {/if}
</span>
{#if head.sortable}
  <span
    class="header-sort-icon"
    class:active={sortedBy == head.value}
    class:asc={sortDirection == "asc"}
    class:desc={sortDirection == "desc"}
  >
    {#if sortDirection == "asc"}
      <Icon name="mdi-arrow-up" />
    {:else}
      <Icon name="mdi-arrow-down" />
    {/if}
  </span>
{/if}
      

Available variables:

Name	Type	Description
head	TableHeader	Header object.

headerLabelSnippet

Custom rendering for header labels.

Default content:

{#if !!head.icon}
  <Icon name={head.icon}/>
{/if}
{head.label}

Available variables:

Name	Type	Description
head	TableHeader	Header object.

appendSnippet

Custom rendering at the end of rows.

Available variables:

Name	Type	Description
index	number	Row index.
item	Item	Row item.

prependSnippet

Custom rendering at the start of rows.

Available variables:

Name	Type	Description
index	number	Row index.
item	Item	Row item.

rowActionsSnippet

Custom actions for rows.

Available variables:

Name	Type	Description
index	number	Row index.
item	Item	Row item.

customSnippet

Custom cell rendering.

Available variables:

Name	Type	Description
index	number	Row index.
columnIndex	number	Column index.
header	TableHeader	Header object.
item	Item	Row item.

noDataSnippet

Custom slot when there are no items.

Default content:

<NoData {lang} />
      

totalsSnippet
Slot to display number of results

Events

onpaginationChange

Fired when pagination values change.

Attribute	Type	Description
rowsPerPage	number	Number of rows per page.
page	number	Current page number.
builder	Builder	Builder with current query state.

onfiltersChange

Fired when the filters change.

Attribute	Type	Description
builder	Builder	Builder with updated filter state.

onremoveAllFilters
Triggered when all filters are removed.
onremoveFilter

Triggered when an individual filter is removed.

Attribute	Type	Description
filter	Filter	The filter that was removed.

onsort

Triggered when sorting changes.

Attribute	Type	Description
sortedBy	string | undefined	Column sorted by.
sortDirection	string	Sorting direction.
sortModify	(params: { builder: FilterBuilder, sortDirection: 'asc' | 'desc' }) => FilterBuilder	Column modify.

onrowClick

Triggered when a row is clicked.

Attribute	Type	Description
item	Item	The clicked row item.

onrowDoubleClick

Triggered when a row is double clicked.

Attribute	Type	Description
item	Item	The clicked row item.

oncolumnResize

Triggered when a column is resized.

Attribute	Type	Description
id	string	Column ID.
newWidthPx	number	New column width in pixels.