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
loading
boolean
Adds a loading bar
false
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))
--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-200))
--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
--simple-table-loader-height
size
Table loader height.
5px
--simple-table-loader-background-color
color
Table loader color.
rgb(var(--global-color-primary-500))
--simple-table-loader-border-radius
size
Table loader border radius.
20px
--simple-table-customize-headers-icon-size
size
Size of the icon to open the headers drawer
17px
--simple-table-non-resizable-header-width
size
Width of non-resizable headers
37px
--simple-table-sticked-background-color
color
Background color for sticked header
rgb(var(--global-color-background-50))

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.

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

stickyAppendSnippet
Appends a sticky header

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.