@diegofhe/svelte-data-table v1.0.6

DEPRECATED

This repository was moved to Healthree Svelte Data Table

Please go there to install the maintained version

Svelte Datatable

This is a reactive svelte-datatable. Feats:

• In reactive: If you change rows, the dataTable updates accordingly
• FrontEnd paginator
• FrontEnd included Searchbar
• You can pass SvelteComponent to render on a column
• You can pass SvelteComponent to render a header
• Sticky 1 column (can sticky just 1 col for now)

Documentation

If searchable == true, by default all columns will be searchable. If you wish to exclude a column from search, specify searchable = false in the column definition.

Custom fuse parameters may also be provided through the fuseConfig prop

Interfaces

interface SvelteComponent{}
interface Column {
    label:string, // header of column
    field: string, // property on rows to display;accessed by _.get
    component?: SvelteComponent //must export row, column rowIndex and columnIndex  to have scopes 
    headerComponent?: SvelteComponent // must export column and columnIndex  to have scopes     
    sortable?: boolean, // false by default
    searchable?: boolean, // true by default
    numeric?: boolean,
    sticky?: boolean,
    sortFnc?: 'function' // eg: (a,b, currentSort) => {}  currentSort can be asc|desc|null
}

CustomStyle

Each element affected by css is divided by 2 clases: Layout and style. You can easily overwrite this css clases to make changes in style. We recomend only changing the styles ones which are:

DataTable Events Events

Header Custom handler

To make the table emit a headerCustomHandler event, the column.headerComponent must dispatch a event called headerCustomHandler to be forwarded to the datable.

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();

    function onClick1(){
        dispatch('headerCustomHandler', {clickOne:true});
    }
    function onClick2(){
        dispatch('headerCustomHandler', {clickTwo:true});
    }
</script>

<div>
    <p on:click={onClick1}>Click1</p>
    <p on:click={onClick2}>Click2</p>
</div>