flex-dapps / svelte-datatable

DataTable for Svelte with Materialize

Svelte Datatable

Contents

Information Features Requirements Installation Basic Usage Advanced Usage

Information

This project was created by the Svelte REPL.

Data Table component was converted to Svelte from MicroDroid/vue-materialize-datatable project.

Paginate component was converted to Svelte from https://github.com/lokyoung/vuejs-paginate project.

See demo here at Heroku(slow)

Features

• Sorting, with numerical sorting
• Pagination - Client & Server Side
• Fuzzy searching
• Excel export
• Printing
• Custom topbar buttons
• Flexible data-from-row extractor
• Follows the Material Design spec
• Limited support for IE 11(need Object.assign polyfill)

Requirements

• materialize-css (and NOT any other MD library!)
• Svelte

Installation

yarn add svelte-datatable
# or
npm i svelte-datatable

There are currently some known issues with dependencies, so if you run into any problems, install svelte-datatable from this git repository with:

yarn add svelte-datatable@https://github.com/Kiho/svelte-datatable.git

Basic Usage

<script>
import { DataTable } from 'svelte-datatable'

// define some columns
let columns = [{
  label: "ID",    // "Pretty" column name
  field: "id",    // Field name from row object
  numeric: true,  // Affects sorting
  html: false     // Escapes output if false.
}, ..., ];

// define some rows of data
let rows = [{
  id: 'SomeValue' // This will match the column above and print a value in it
}, ..., ]
</script>

<!-- Import the materialize css/js here -->

<DataTable
  {columns}
  {rows}
/>

## Advanced Usage

This section is under construction - the best place to look for clues about advanced usage for this library is the src/DataTable.svelte file, which has a lot of export let statements. They should give you an idea about which props are available and what you can use them for.