Home

Awesome

npm

Svelte Data Grid

Demo

Svelte Data Grid is a svelte v3 component for displaying and editing any amount of data.

Features:

Current Limitations:

Usage:

If using within Sapper:

npm install svelte-data-grid --save-dev

If using from inside a svelte component:

import DataGrid from "svelte-data-grid";
<DataGrid rows={myRows} allowColumnReordering={false} columns={myColumnDefinitions} on:columnOrderUpdated={saveNewColumnOrder}>

If using from outside svelte:

import DataGrid from "svelte-data-grid";
const grid = new DataGrid({
  target: document.querySelector('#my-grid-wrapper'),
  data: {
    rows: [ ... ],
    columns: [ ... ],
    allowResizeFromTableCells: true
  }
});

grid.$on('columnOrderUpdated', () => {
  const { columns } = grid.get();
  // save new column  order
});

To learn more about using DataGrid outside of svelte, read svelte's guide on how to interact with a svelte component. It is possible to integrate into any framework.

DataGrid requires 2 properties to be passed in order to display data: rows and columns.

columns is an array of objects containing at least 3 properties: display, dataName, and width. A svelte component can be specified in headerComponent and cellComponent if any custom cell behavior is required.

[
  {
    display: 'Fruit Name',  // What will be displayed as the column header
    dataName: 'fruitName',  // The key of a row to get the column's data from
    width: 300,             // Width, in pixels, of column
    disallowResize: true    // Optional - disables resizing this column
  },
  {
    display: 'Color',
    dataName: 'fruitColor',
    width: 600,
    myExtraData: 12345
  }
]

rows is an array of objects containing the data for each table row.

[
  {
    fruitName: 'Apple',
    fruitColor: 'Red'
  },
  {
    fruitName: 'Blueberry',
    fruitColor: 'Blue'
  },
  {
    fruitName: 'Tomato',
    fruitColor: 'Red'
  }
]

Editing Data

Version 2 added early support for editing data. Due to the lack of using a keyed each block to render the rows, maintaining focus on controls as the user scrolls is a tad wonky. This will be resolved in a future version.

Import the components:

import TextboxCell from 'svelte-data-grid/src/textbox-cell.svelte';
import SelectCell from 'svelte-data-grid/src/select-cell.svelte';
import CheckboxCell from 'svelte-data-grid/src/checkbox-cell.svelte';

Textbox Cell

Textbox cell will debounce the user input, only recording changes after 400ms has elapsed since the user stops typing.

{
  display: 'Name',
  dataName: 'name',
  width: 250,
  cellComponent: TextboxCell
}

Select Cell

SelectCell requires that you provide an options array in your cell definition:

{
  display: 'Eye Color',
  dataName: 'eyeColor',
  width: 75,
  cellComponent: SelectCell,
  options: [
    {
      display: 'Green',
      value: 'green'
    },
    {
      display: 'Blue',
      value: 'blue'
    },
    {
      display: 'Brown',
      value: 'brown'
    }
  ]
}

Checkbox Cell

CheckboxCell will set the checked state of the checkbox depending on the boolean value of the row's data.

{
  display: 'Active',
  dataName: 'isActive',
  width: 75,
  cellComponent: CheckboxCell
}

Custom Cell Components

Need to customize how your data is displayed or build more complex functionality into your grid? Specify cellComponent in your definition in the columns property.

Components will be passed the following properties:

MyCustomCell.svelte

<script>
export let data = {
  colors: {
    Red: '#FF0000',
    Blue: '#0000FF'
  }
};
</script>

<div style="color: {colors[row.data[column.dataName]] || 'black'};">
  {row.data[column.dataName]}
</div>

Import the component

import MyCustomCell from './MyCustomCell.svelte';

columns option:

[
  {
    display: 'Fruit Color'
    dataName: 'fruitColor',
    width: 300,
    cellComponent: MyCustomCell
  }
]

Custom Header Components

Header components can also be specified in columns entries as the headerComponent property. Header components are only passed column, the column object from columns.

Options:

Svelte Data Grid provides a few options for controlling the grid and its interactions:

Events:

Column Affixing

This feature works well on Chrome because Chrome's scroll events are not fired asynchronously from the scroll action. Firefox, Edge, and IE all fire scroll events after the overflow container has scroll on screen. This causes a jittery effect that we cannot easily work around while providing a cross-browser solution.

To fix the jitteriness on Firefox, a setting in about:config can be changed to turn off APZ. Set layers.async-pan-zoom.enabled to false. Obviously this is not a solution we can reasonably ask users to try, so I'm looking for other solutions.

Bugs? Suggestions?

Feedback is always appreciated. Feel free to open a GitHub issue if DataGrid doesn't work the way you expect or want it to.