SimpleTable

Grid beutiful view.

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
resizableColumns
boolean
Enables column resizing.
false
resizedColumnSizeWithPadding
{ [value: string]: number } | undefined
Stores column widths after resizing.
undefined
pointerOnRowHover
boolean
Changes the cursor on row hover.
false
lang
'en' | 'it'
Language of the table.
'en'
noItemsText
string
Message to appear when there are no items
No data available
doubleClickActive
boolean
Enables the double click of the row.
false
doubleClickDelay
number
Time window (in ms) to double click
250
calculateRowStyles
CalculateRowStyles<Item> | undefined
Function to calculate row styles.
undefined
calculateRowClasses
CalculateRowClasses<Item> | undefined
Function to calculate row classes.
undefined
class
{ container?: string, header?: string, row?: string, cell?: string }
CSS class names for table elements.
{}
🎨 style props
--simple-table-header-hover-color
color
Hover color for header.
rgb(var(--global-color-contrast-800), .7)
--simple-table-background-color
color
Table background color.
transparent
--simple-table-header-background-color
color
Header background color.
rgb(var(--global-color-background-400), .8)
--simple-table-separator-color
color
Row separator color.
rgb(var(--global-color-background-400))
--simple-table-header-height
size
Height of the table header.
30px
--simple-table-header-border-radius
size
Border radius of the table header.
5px
--simple-table-width
size
Table width.
100%
--simple-table-row-height
size
Row height.
60px
--simple-table-row-hover-background-color
color
Row hover background color.
rgb(var(--global-color-background-400), .2)
--simple-table-header-padding
size
Padding of the table header.
.2rem .5rem
--simple-table-header-font-weight
weight
Font weight of the table header.
700
--simple-table-overflow-x
overflow
Table horizontal overflow behavior.
auto
--simple-table-header-label-margin
margin
Table header label margin.
0 5px 0 0

Slots

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} />
      

Events

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.