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

Icons

This project uses material icons, this dependency need to be installed on the project that use svelte-data-table

Follow the instructions here

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
    type?: string, // string by default can be: number | date
    sticky?: boolean,
    sortFnc?: 'function' // eg: (a,b, currentSort) => {}  currentSort can be asc|desc|null
    transform?: 'function' // can also be an object --> see 'Transform' section below
}

CustomStyle

Each element affected by css is divided by 2 classes: Layout and style. You can easily overwrite this css classes to make changes in style. We recommend 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 an 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>

Transform

Interfaces

// for all cases, note that pre-transformed data still exists and is never overwritten

transform: 'function' // e.g. (data) => { transform logic here }
// or
interface transform {
    sourceField?: string            // accessed by _.get; path of target to transform; Defaults to value stored in column.field;
    destinationField?: string       // accessed by _.set; new location to store the transformed data; Defaults to value stored in 'column.field';
    cull?: boolean                  // defaults to false; flag to ONLY return an object containing the transformed data
    fnc: 'function'                 // e.g. (data) => { transform logic here }
}

// if the property pointed to by 'field' or 'sourceField' is 
// null or undefined, then transform does nothing

Example Code

const rows = [
    {
        data: {
            title: "   my Title ",
            values: [0, 1, 2, 3, 4, 5],
            obj: {
                world: "world"
            }
        }
    }
];

function trimAndCAPS(title) {
    return title.trim().toUpperCase() + '!!!';
}

function reduce(valuesArray) {
    return valuesArray.reduce((a, b) => {
        return a + b;
    }, 0);
}

const columns = [
    {
        label: "Title",
        field: "data.title",        // note that if this data does not exist, the value is set to 'null'
        component: myComponent,     // optional svelte component : receives newly created, transformed object
        transform: trimAndCAPS
        //  new object returned after transform :
        //      {
        //          data: {
        //              title: "MY TITLE!!!",
        //              values: [0, 1, 2, 3, 4, 5],
        //              obj: { world: "world" },
        //          }
        //      }
    },
    {
        // this example works exactly the same as example above
        label: "transform as an object -- example 2",
        field: "data.title",
        transform: {
            fnc: trimAndCAPS
        }
    },
    {
        label: "Storing Transform Separately",
        field: "transformed.value",       // set default field to look at the newly created 'transformed.value' propery
        component: myComponent,           // optional svelte component : receives newly created, transformed object
        transform: {
            sourceField: 'data.values',                 // note again that this defaults to the 'column.field' property
            destinationField: 'transformed.value',      // note that this path need not exist, and will be created on the fly.
            fnc: reduce
        }
        //  new object returned after transform :
        //      {
        //          data: {
        //              title: "   my Title ",
        //              values: [0, 1, 2, 3, 4, 5],
        //              obj: { world: "world" },
        //          }
        //          transformed: {
        //              value: 15
        //          }
        //      }
    },
    {
        label: "culled transform",
        field: "transformed.value",
        transform: {
            sourceField: 'data.values',
            destinationField: 'transformed.value',
            cull: true,                   // only return transformed values
            fnc: reduce
        }
        //  new object returned after transform :
        //      {
        //          transformed: {
        //              value: 15
        //          }
        //      }
    },
    {
        // the object syntax adds a little bit more flexibility, especially for use-cases with components
        label: "Examining Scope",
        field: "transformed.obj.concat",
        component: myComponent,
        transform: {
            sourceField: 'data',                 // note again that this defaults to the 'column.field' property
            destinationField: 'transformed',     // note that this path need not exist, and will be created on the fly.
            fnc: (data) => {
                if (!data.obj.hello) data.obj.hello = 'hello';
                data.obj.concat = `${data.title.trim()} says '${data.obj.hello} ${data.obj.world}' : sum = ${reduce(data.values)}`;
                data.values.push(6);
                data.title = trimAndCAPS(data.title);
                return data;
            }
        }
        //  new object returned after transform :
        //      {
        //          data: {
        //              title: "   my Title ",
        //              values: [0, 1, 2, 3, 4, 5],
        //              obj: { world: "world" },
        //          }
        //          transformed: {
        //              title: "MY TITLE!!!",
        //              values: [0, 1, 2, 3, 4, 5, 6],
        //              obj: {
        //                  concat: "my Title says 'hello world' : sum = 15",
        //                  hello: "hello",
        //                  world: "world"
        //              }
        //          }
        //      }
    },
    {
        label: "truncating & overwriting side-effect of passing objects",
        field: "data",
        transform: (data) => {
            return `there are ${reduce(data.values)} ${data.obj.world}s out there`;
        }
        //  new object returned after transform :
        //      {
        //          data: "there are 15 worlds out there"
        //      }
    }
];