Nattily Polished Marbles


    3.0.0 • Public • Published


    Svelte Data Grid


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


    • Excellent scrolling performance
    • ARIA attributes set on elements
    • Lightweight even when displaying a huge dataset due to implementation of a "virtual list" mechanism
    • Column headers remain fixed at the top of the grid
    • Custom components can be specified to control how individual table cells or column headers are displayed
    • Columns can be resized and reordered

    Current Limitations:

    • Every row must have the same height and text cannot break onto the next line


    If using from inside a svelte component:

    <DataGrid rows={myRows} allowColumnReordering={false} columns={myColumnDefinitions} on:columnOrderUpdated="saveNewColumnOrder()">

    If using from outside svelte:

    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 adds 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.html';
    import SelectCell from 'svelte-data-grid/src/select-cell.html';
    import CheckboxCell from 'svelte-data-grid/src/checkbox-cell.html';

    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:

    • rowNumber - The index of the row within rows
    • row - The entire row object from rows
    • column - The entire column object from columns


    <div style="color: {colors[[column.dataName]] || 'black'};">
    export default {
      data() {
        return {
          colors: {
            Red: '#FF0000',
            Blue: '#0000FF'

    Import the component

    import MyCustomCell from './MyCustomCell.html';

    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.


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

    • rowHeight - The row height in pixels (Default: 24)
    • allowResizeFromTableCells - Allow user to click and drag the right border of a table cell to resize the column (Default: false)
    • allowResizeFromTableHeaders - Allow user to click and drag the right border of a column header to resize the column (Default: true)
    • allowColumnReordering - Allow user to drag a column header to move that column to a new position (Default: true)
    • allowColumnAffix - Allow user to drag the double line to affix columns to the left side of the grid. See section below for caveats (Default: true if the browser is chrome, false otherwise)
    • __extraRows - If it is desired that the virtual list include more DOM rows than are visible, the number of extra rows can be specified in __extraRows (Default: 0)
    • __columnHeaderResizeCaptureWidth The width of the element, in pixels, placed at the right border of a column that triggers that column's resize. (Default: 20)


    • columnOrderUpdated - Fired when the user has dragged a column to a new position. The updated column order can be accessed from component.get().columns
    • columnWidthUpdated - Fired when a user has resized a column. The updated column width can be accessed from event.width and the column index can be accessed from event.idx

    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.


    npm i svelte-data-grid

    DownloadsWeekly Downloads






    Unpacked Size

    128 kB

    Total Files


    Last publish


    • bsssshhhhhhh