Stk Table Svelte(Sticky Table) is a high-performance virtual list component based on Svelte.

Smooth performance with tens of thousands of rows.

Used for real-time data display, with data highlighting and dynamic effects.

Support Svelte 5.

Documentation

Stk Table Svelte Official

Stk Table Vue Official

Stk Table React Official

Stk Table Solid Official

Repo:

• Github

Usage

npm install stk-table-svelte

Import style in your entry file:

import 'stk-table-svelte/lib/style.css';

<script lang="ts">
import { onMount } from 'svelte';
import { StkTable } from 'stk-table-svelte';
import type { StkTableColumn } from 'stk-table-svelte';

let stkTableRef: StkTable | undefined;

// highlight row
stkTableRef?.setHighlightDimRow([rowKey], {
    method: 'css' | 'animation', // default animation
    className: 'custom-class-name', // for method 'css'
    keyframe: { backgroundColor: ['#aaa', '#222'] }, // same as https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
    duration: 2000,
});
// highlight cell
stkTableRef?.setHighlightDimCell(rowKey, colDataIndex, {
    method: 'css' | 'animation',
    className: 'custom-class-name', // for method 'css'
    keyframe: { backgroundColor: ['#aaa', '#222'] }, // for method 'animation'
    duration: 2000,
});

const columns: StkTableColumn<any>[] = [
    { title: 'name', dataIndex: 'name' },
    { title: 'age', dataIndex: 'age' },
    { title: 'address', dataIndex: 'address' },
];

const dataSource = [
    { id: 1, name: 'John', age: 32, address: 'New York' },
    { id: 2, name: 'Jim', age: 42, address: 'London' },
    { id: 3, name: 'Joe', age: 52, address: 'Tokyo' },
    { id: 4, name: 'Jack', age: 62, address: 'Sydney' },
    { id: 5, name: 'Jill', age: 72, address: 'Paris' },
];
</script>

<StkTable bind:this={stkTableRef} rowKey="id" {columns} {dataSource}></StkTable>

API

• Props

• Emits

• Slots

• Expose

• StkTableColumn: Define column type

• Highlight: setHighlightDimCell & setHighlightDimRow

Example

<script lang="ts">
    import { StkTable } from 'stk-table-svelte';
    import type { StkTableColumn } from 'stk-table-svelte';
    import CustomCell from './CustomCell.svelte';
    import CustomHeaderCell from './CustomHeaderCell.svelte';

    let stkTableRef: StkTable | undefined;

    const columns: StkTableColumn<any>[] = [
        {
            title: 'Name',
            dataIndex: 'name',
            fixed: 'left',
            width: '200px',
            headerClassName: 'my-th',
            className: 'my-td',
            sorter: true,
            customHeaderCell: CustomHeaderCell, // svelte component
            customCell: CustomCell, // svelte component
        },
    ];

    const dataSource = [{ name: 'John' }];
</script>

<StkTable
    bind:this={stkTableRef}
    rowKey="name"
    theme="dark"
    style="height: 200px"
    bordered="h"
    rowHeight={28}
    showOverflow={false}
    showHeaderOverflow={false}
    sortRemote={false}
    colResizable
    headerDrag
    virtual
    virtualX
    noDataFull
    autoResize
    fixedColShadow
    colMinWidth={10}
    headless={false}
    {columns}
    {dataSource}
    oncurrentchange={onCurrentChange}
    onrowmenu={onRowMenu}
    onheaderrowmenu={onHeaderRowMenu}
    onrowclick={onRowClick}
    onrowdblclick={onRowDblclick}
    onsortchange={handleSortChange}
    oncellclick={onCellClick}
    onheadercellclick={onHeaderCellClick}
    ontablescroll={onTableScroll}
    oncolorderchange={onColOrderChange}
/>

Other

• stk-table-vue - Vue version
• Compare performance with other vue table vue-table-compare