DynamicTable With Filter Panel

Dynamic Table and pagination agreement with filter.

Example

READ ME

If the initial amount of rows is not big enough to generate the scroll, the table will NOT dispatch the fetchData custom event. It is advised to keep the initial number of rows around the number of renderedRowsNumber (default is 100) and always not less that 25

Props

🕹️ standard props
headers
Header[]
Main table headers
[]
headersToShowInTable
Header[]
Headers currently shown in table
headers
subHeaders
Header[]
Secondary row of headers
[]
customizeHeaders
boolean
Allow header customization
false
rows
Row[]
Table row data
[]
sortedBy
string
Sorted column key
undefined
sortDirection
'asc' | 'desc'
Sort order direction
'asc'
cellEdit
boolean
Enable inline cell editing
false
noItemsText
string
Text shown when no data is present
'No items to show'
showSelect
boolean
Enable row selection
false
showActions
boolean
Show actions
true
selectMode
'single' | 'multiple'
Selection mode
'single'
selectedItems
RowItem[]
Currently selected items
[]
unselectedItems
RowItem[]
Unselected items if selectedAll is active
[]
selectedAll
boolean
Toggles the selectedAll checkbox
false
showExpand
boolean
Allow row expansion
false
loading
boolean
Show loading state
false
disabled
boolean
Disable the table
false
filters
Filter[]
Filters applied to the table
[]
multiEditTabs
Tab[]
Tabs for multi-edit filter mode.
searchBarColumns
string[]
Columns to apply search bar filtering
undefined
searchBarVisible
boolean
Toggle search bar visibility
false
searchBarPlaceholder
string
Search bar placeholder text
'Type to search...'
filtersVisible
boolean
Show filters section
false
quickFiltersVisible
boolean
Show quick filters
false
lang
'it' | 'en'
Language for internal strings
'en'
dateLocale
'it' | 'en'
Locale for filter chips
'it'
editFilterMode
'one-edit' | 'multi-edit'
Filter editing mode
'one-edit'
showActiveFilters
boolean
Display currently active filters
true
quickFilters
QuickFilter[]
Quick filter options
[]
actionsForSelectedItems
Action[]
Actions to show for selected items
[]
quickActionsDisabled
boolean
Disables quick actions
false
totalRows
number
Total number of rows
rows.length
searchText
string
Current search string
undefined
renderedRowsNumber
number
Number of rows rendered in viewport
100
sectionRowsNumber
number
Rows per scroll section
20
sectionThreshold
number
Threshold to trigger new section loading
2
backwardThresholdPixel
number
Scroll threshold above to load new rows
100
forwardThresholdPixel
number
Scroll threshold below to load new rows
100
uniqueKey
keyof RowItem
Field used as unique key
'id'
numberOfResultsVisible
boolean
Show number of results
false
resizableColumns
boolean
Enables the resize of the columns
false
resizedColumnSizeWithPadding
{ [value: string]: number }
The width of the headers
{}
endLineVisible
boolean
Show end line at bottom
false
dynamicFilters
boolean
Switch Between Dynamic and normal filters
true
useSelectedItemsOnly
boolean
Uses only selectedItems if all rows are fetched initially
false
selectedAllDisabled
boolean
Disabled the selected all
false
headerDrawerProps
object
Props of the headers drawer
class
{ container?: string; header?: string; row?: string; cell?: string }
Custom classes for table elements
{}
🎨 style props
--dynamic-table-cell-editor-background-color
color
Background color for editable cells
rgb(var(--global-color-background-300))
--dynamic-table-cell-border
color
Border color of each cell
none
--dynamic-table-quick-filter-background-color
color
Background of quick filter bar
rgb(var(--global-color-background-300))
--dynamic-table-row-background-color-hover
color
Hover background color for rows
rgb(var(--global-color-background-200))
--dynamic-table-expanded-row-background-color
color
Background color for expanded rows
rgb(var(--global-color-background-300))
--dynamic-table-selected-row-background-color
color
Background color of selected rows
rgb(var(--global-color-primary-200))
--dynamic-table-row-disabled-background-color
color
Background of disabled rows
rgb(var(--global-color-primary-400))
--dynamic-table-header-background-color
color
Table header background color
rgb(var(--global-color-background-400))
--dynamic-table-background-color
color
Overall background color of table
transparent
--dynamic-table-max-height
size
Maximum height of table scroll area
70vh
--dynamic-table-header-padding
size
Padding for header cells
4px 0 4px 8px
--dynamic-table-header-font-size
size
Font size for headers
13px
--dynamic-table-header-font-weight
weight
Font weight of headers
700
--dynamic-table-subheader-background-color
color
Subheader background color
rgb(var(--global-color-background-100))
--dynamic-table-hover-color
color
Text color on hover
rgb(var(--global-color-contrast-800), .7)
--dynamic-table-header-border-radius
size
Border radius of header cells
5px
--dynamic-table-header-height
size
Height of header row
25px
--dynamic-table-row-min-height
size
Minimum height for rows
45px
--dynamic-table-end-line-background-color
color
Background color of end line
transparent
--dynamic-table-end-line-color
color
Border color of end line
rgb(var(--global-color-contrast-500))
--dynamic-table-end-line-text-color
color
Text color in end line
rgb(var(--global-color-contrast-500))
--dynamic-table-border-collapse
border
Table borders collapsed or separated
collapse
--dynamic-table-header-label-margin
margin
Table header label margin
0px 4px 0px 0px
--dynamic-table-header-label-font-size
font-size
Table header label font size
small

Slots

searchBarSnippet

Custom search bar

Default content:

<div style="margin-right: 20px;">
  <SimpleTextField
    placeholder={searchBarPlaceholder}
    appendInnerIcon="mdi-magnify"
    bind:value={searchText}
    bind:input={searchBarInput}
    onkeydown={handleSearchBoxKeydown}
    --simple-textfield-default-width="450px"
    --simple-textfield-border-radius= 0.5rem
    --simple-textfield-background-color= transparent
    --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
    --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
  />
</div>
    

Available variables:

Name	Type	Description
handleSearchChange	function	Callback for search changes

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

Custom rendering of individual filter chip.

Available variables:

Name	Type	Description
filter	Filter	The filter to render.

customFilterSnippet

Custom filter content

Available variables:

Name	Type	Description
filter	Filter | undefined	The filter definition
updateCustomFilterValues	function	Updater for custom dynamic filters
updateFunction	function	Updater for custom normal filters
mAndDown	boolean	Screen size M and lower

selectionSnippet

Renders each selected item.

Default content:

<div tabindex="-1">
  <Chip
    close={true}
    onclose={() => unselect(selection)}
    --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
    buttonTabIndex={-1}
    truncateText
  >
    {#if chipLabelSnippet}
      {@render chipLabelSnippet({ selection })}
    {:else}
      {selection.label}
    {/if}
  </Chip>
</div>
      

Available variables:

Name	Type	Description
selection	ItemData	The selected item.
unselect	function	Function to unselect the item.

itemLabelSnippet

Renders the label of an item.

Default content:

{item.label}

Available variables:

Name	Type	Description
item	ItemData	The item to render the label for.

chipLabelSnippet

Renders the label inside each chip.

Default content:

{selection.label}

Available variables:

Name	Type	Description
selection	ItemData	The selected item.

headerSnippet

Custom header content

Default content:

<span class="header-label" bind:this={infoActivators[index]}>
  {#if headerLabelSnippet}
    {@render headerLabelSnippet({ header })}
  {:else}
    {#if !!header.icon}
      <Icon name={header.icon} --icon-size=12px />
    {/if}
    {header.label}
  {/if}
  {#if !!header.info}
    <Icon						
      name="mdi-help-circle-outline"
      --icon-size="14px"
    />
  {/if}
</span>
{#if header.sortable}
  <span
    class="header-sort-icon"
    class:active={sortedBy == header.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
header	Header	Header object

headerLabelSnippet

Custom header label

Default content:

{#if !!header.icon}
  <Icon name={header.icon} --icon-size=12px />
{/if}
{header.label}

Available variables:

Name	Type	Description
header	Header	Header object

rowAppendSnippet

Slot appended to each row

Available variables:

Name	Type	Description
index	number	Row index
row	Row	Row item

customRowSnippet

Custom row cell content

Available variables:

Name	Type	Description
index	number	Row index
columnIndex	number	Column index
header	Header	Header definition
row	Row	Row item

subHeaderSnippet

Subheader custom content

Default content:

<span class="header-label">
  {#if subHeaderLabelSnippet}
    {@render subHeaderLabelSnippet({ subHeader })}
  {:else}
    {subHeader.label}
  {/if}
</span>
{#if subHeader.sortable}
  <span
    class="header-sort-icon"
    class:active={sortedBy == subHeader.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
subHeader	Header	Subheader

subHeaderLabelSnippet

Label for subheader

Default content:

{subHeader.label}

Available variables:

Name	Type	Description
subHeader	Header	Subheader

subRowAppendSnippet

Appended content for sub-rows

Available variables:

Name	Type	Description
index	number	Row index
row	RowItem	Row item

subRowActionsSnippet

Action buttons for sub-rows

Available variables:

Name	Type	Description
index	number	Row index
row	RowItem	Row item

customSubRowSnippet

Custom sub-row cell content

Available variables:

Name	Type	Description
index	number	Row index
columnIndex	number	Column index
header	Header	Header
row	RowItem	Row item

customQuickFilterSnippet

Slot for quick filter UI

Available variables:

Name	Type	Description
quickFilter	QuickFilter	Quick filter object
setQuickFilterMissingValue	function	Callback to mark quick filter as incomplete

appendSnippet
General purpose append slot
headerDrawerContentSnippet
Headers drawer custom content
headerDrawerHeadersToAddSnippet

Headers drawer custom items

Default content:

<div
  style:display=flex
>
  <div
    style:flex-grow=1
  >
    {#if !!item.icon}
      <Icon name={item.icon} />
    {/if}
    {item.name}
  </div>
  <div
    style:display=flex
    style:min-width=50px
    style:justify-content=end
  >
    <Switch
      --switch-label-width="90%"
      value={headersToShow.find((h) => h.id == item.id) != undefined}
      onchange={(e) => {
        if (e.detail.value == false) {
          headersToShow = headersToShow.filter((h) => h.id != item.id);
          availableHeaders = [...availableHeaders, item];
        }
      }}
    />
  </div>
</div>

Available variables:

Name	Type	Description
item	Header	The item being rendered.

headerDrawerItemSnippet

Headers drawer custom headers to add

Default content:

<div
  class="headers-show"
>
  <div
    style:display=flex
  >
    <div
      style:flex-grow=1
    >
      {#if !!header.icon}
        <Icon name={header.icon} />
      {/if}
      {header.name}
    </div>
    <div
      style:display=flex
      style:min-width=50px
      style:justify-content=end
    >
      <Switch
        --switch-label-width="90%"
        value={false}
        onchange={(e) => {
          if (e.detail.value == true) {
            availableHeaders = availableHeaders.filter(
              (h) => h.id != header.id
            );
            headersToShow = [...headersToShow, header];
          }
        }}
      />
    </div>
  </div>
</div>

Available variables:

Name	Type	Description
header	{ id: string; name: string; }	The item being rendered.

Events

onsort

Fired when the sort column or direction changes

Attribute	Type	Description
sortedBy	string | undefined	Sorted column
sortDirection	string	Sort direction

onrowClick

Fired when a row is clicked

Attribute	Type	Description
item	RowItem	Clicked item

oncellClick

Fired when a cell is clicked

Attribute	Type	Description
item	RowItem	Row item of clicked cell

onsaveCellEdit

Triggered after editing a cell

Attribute	Type	Description
item	any	Updated item

onsaveHeadersToShow

Triggered when the user saves which headers to show

Attribute	Type	Description
headersToShow	Header[]	Selected headers to show

onfiltersChange

Emitted when filters are updated

Attribute	Type	Description
builder	FilterBuilder	Current filter builder state

onfetchData
Emitted to trigger data reload
onremoveFilter

Triggered when a single filter is removed

Attribute	Type	Description
filter	Filter	Removed filter

onremoveAllFilters
Triggered when all filters are removed
onremoveCustomQuickFilter

Triggered when a custom quick filter is removed

Attribute	Type	Description
quickFilter	QuickFilter	Quick filter removed

onapplyCustomQuickFilter

Triggered when a custom quick filter is applied

Attribute	Type	Description
quickFilter	QuickFilter	Quick filter being applied
setQuickFilterValue	(quickFilter: QuickFilter, value?: any) => void	Function to update the quick filter value

onscroll
Fired on scroll event of the container
oncolumnResize

Fired when a column is resized

Attribute	Type	Description
id	string	The header resized
newWidthPx	number	The new header width