Need help with svelte-table?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dasDaniel
239 Stars 21 Forks MIT License 75 Commits 6 Opened issues

Description

A svelte-3 table implementation that allows sorting and filtering

Services available

!
?

Need anything else?

Contributors list

# 183,377
netlify
grid-sy...
CSS
Markdow...
60 commits
# 628,349
vscode-...
languag...
Svelte
HTML
1 commit
# 380,546
Swift
JavaScr...
1 commit

svelte-table

A relatively minimal svelte table example. Allows sorting and filtering based on column values.

Example

github pages IIFE example

Install

npm install -save svelte-table

Usage

The package includes exports for raw svelte, ES Module(.mjs) and CJS (.js) exports. Your bundler will likely know which one to pick by using

import SvelteTable from "svelte-table"

An iife version is also available in the

/dist/iife
folder. This allows for easy run-time use, such as a direct uncompiled dependency for a use outside of a svelte project.

Sample Data and config

// define some sample data...
const rows = [
  { id: 1, first_name: "Marilyn", last_name: "Monroe", gender: "female" },
  { id: 2, first_name: "Abraham", last_name: "Lincoln", gender: "male" },
  { id: 3, first_name: "Mother", last_name: "Teresa", gender: "female" },
  { id: 4, first_name: "John F.", last_name: "Kennedy", gender: "male" },
  { id: 5, first_name: "Martin Luther", last_name: "King", gender: "male" },
  { id: 6, first_name: "Nelson", last_name: "Mandela", gender: "male" },
  { id: 7, first_name: "Winston", last_name: "Churchill", gender: "male" },
  { id: 8, first_name: "George", last_name: "Soros", gender: "male" },
  { id: 9, first_name: "Bill", last_name: "Gates", gender: "male" },
  { id: 10, first_name: "Muhammad", last_name: "Ali", gender: "male" },
  { id: 11, first_name: "Mahatma", last_name: "Gandhi", gender: "male" },
  { id: 12, first_name: "Margaret", last_name: "Thatcher", gender: "female" },
  { id: 13, first_name: "Christopher", last_name: "Columbus", gender: "male" },
  { id: 14, first_name: "Charles", last_name: "Darwin", gender: "male" },
  { id: 15, first_name: "Elvis", last_name: "Presley", gender: "male" },
  { id: 16, first_name: "Albert", last_name: "Einstein", gender: "male" },
  { id: 17, first_name: "Paul", last_name: "McCartney", gender: "male" },
  { id: 18, first_name: "Queen", last_name: "Victoria", gender: "female" },
  { id: 19, first_name: "Pope", last_name: "Francis", gender: "male" },
  // etc...
];

// define column configs const columns = [ { key: "id", title: "ID", value: v => v.id, sortable: true, filterOptions: rows => { // generate groupings of 0-10, 10-20 etc... let nums = {}; rows.forEach(row => { let num = Math.floor(row.id / 10); if (nums[num] === undefined) nums[num] = { name: ${num * 10} to ${(num + 1) * 10}, value: num }; }); // fix order nums = Object.entries(nums) .sort() .reduce((o, [k, v]) => ((o[k] = v), o), {}); return Object.values(nums); }, filterValue: v => Math.floor(v.id / 10), headerClass: "text-left", }, { key: "first_name", title: "FIRST_NAME", value: v => v.first_name, sortable: true, filterOptions: rows => { // use first letter of first_name to generate filter let letrs = {}; rows.forEach(row => { let letr = row.first_name.charAt(0); if (letrs[letr] === undefined) letrs[letr] = { name: ${letr.toUpperCase()}, value: letr.toLowerCase(), }; }); // fix order letrs = Object.entries(letrs) .sort() .reduce((o, [k, v]) => ((o[k] = v), o), {}); return Object.values(letrs); }, filterValue: v => v.first_name.charAt(0).toLowerCase(), }, { key: "last_name", title: "LAST_NAME", value: v => v.last_name, sortable: true, filterOptions: rows => { // use first letter of last_name to generate filter let letrs = {}; rows.forEach(row => { let letr = row.last_name.charAt(0); if (letrs[letr] === undefined) letrs[letr] = { name: ${letr.toUpperCase()}, value: letr.toLowerCase(), }; }); // fix order letrs = Object.entries(letrs) .sort() .reduce((o, [k, v]) => ((o[k] = v), o), {}); return Object.values(letrs); }, filterValue: v => v.last_name.charAt(0).toLowerCase(), }, { key: "gender", title: "GENDER", value: v => v.gender, renderValue: v => v.gender.charAt(0).toUpperCase() + v.gender.substring(1), // capitalize sortable: true, filterOptions: ["male", "female"], // provide array }, ];

Props

| Option | Type | Description | | ---------------------- | ------------ | ----------------------------------------------------------- | |

columns
| Object[] | column config (details below) | |
rows
| Object[] | row (data) array | |
sortBy
| String | ‡ Sorting key | |
sortOrder
| Number | ‡
1
= Ascending,
-1
Descending | |
iconAsc
| String | override ascending order indication | |
iconDesc
| String | override descending order indication | |
iconExpand
| String | row collapsed indicator/button | |
iconExpanded
| String | row expanded indicator/button | |
clickCol
| function | event listener/callback | |
clickRow
| function | event listener/callback | |
clickCell
| function | event listener/callback | |
clickExpand
| function | event listener/callback | |
classNameTable
| String/Array | optional class name(s) for table element | |
classNameThead
| String/Array | optional class name(s) for thead element | |
classNameTbody
| String/Array | optional class name(s) for tbody element | |
classNameSelect
| String/Array | optional class name(s) for select elements | |
classNameRow
| String/Array | optional class name(s) for row elements | |
classNameRowExpanded
| String/Array | optional class name(s) for expanded row content | |
classNameCell
| String/Array | optional class name(s) for cell elements | |
classNameCellExpand
| String/Array | optional class name(s) for cell with expand icon | |
expanded
| any[] | optional array of key values of expanded rows | |
expandRowKey
| string | optional key for expanded row (use unique values like id) | |
expandSingle
| Object[] | optional allow only one row to be expanded | |
filterSelections
| Object[] | ‡ optional search or filter selection | |
showExpandIcon
| boolean | should a expand column be visible |

field allows 2-way binding

Events

Events pass a CustomEvent object with the following params in the

detail
object
  • clickCol:
    event
    ,
    col
    ,
    key
  • clickRow:
    event
    ,
    row
  • clickCell:
    event
    ,
    row
    ,
    key
  • clickExpand:
    event
    ,
    row

Expanding Rows

  • Row expanding is tracked using the
    expanded
    property. (supports 2-way binding)
  • The keys are defined using the
    expandRowKey
    property. It's a good idea to use a key that is unique to each row like a dedicated id or key field, to prevent conflict.
  • The content for the field is passed through the
    expanded
    slot.
  • The expanding can be managed manually or by using the built-in column using
    showExpandIcon
    property
  • Expand events can be listened to using
    on:clickExpand
    which will include the
    row
    object in the
    event.detail
    object.
  • expandSingle
    can be set to true to only allow a single column open at a time (only works when
    expanded
    is managed internally)

Example:

{row.detail}

filterSelections

Allows getting and setting the search or filter value. The

filterSelections
will update as the filter and search selection changes. Inside the object keys (matching row keys) will be used to get/set the filter and search values. Setting key to
undefined
or deleting it will remove filter or search setting.

example: (will preset column with key

first_name
to
a
)

Column array object values

| Option | Type | Description | | ------------------- | -------------- | ------------------------------------------------------------------------------------------------------------- | |

key
| String | Unique key identifying the column | |
title
| String | Title for header | |
value
| Function | table cell value. The function is passed row data | |
[class]
| String | optional table cell class name | |
[sortable]
| Boolean | optional Whether the table can be sorted on column | |
[searchValue]
| Function | optional search value function. function is passed row data. | |
[filterOptions]
| Array/Function | optional array of objects with
name
and
value
. Function is provided array of rows | |
[filterValue]
| String | optional value to filter on, usually same as value | |
[headerClass]
| String | optional class to assign to header | |
[renderValue]
| Function | optional render function for rendering html content | |
[renderComponent]
| Component | optional pass a Svelte component, component will receive
row
and
col
variables (replaces
renderValue
) |

renderComponent

Defining a component can be done directly by passing the component as a value

[
  {
    key: "myColumn",
    //...
    renderComponent: myComponent,
  },
];

Or, if props need to be passed, an object with

component
and
props
can be passed.
[
  {
    key: "myColumn",
    //...
    renderComponent: {
      component: myComponent,
      props: {
        myProp: "someValue",
      },
    },
  },
];

Slots

| Option | Description | | ---------- | ---------------------------------------------------------------------------------------------- | |

header
| slot for rendering the
tr
and
th
content. This will replace
title
in the header | |
row
| slot for rendering the
tr
and
td
content. This will replace the rendering of
renderValue
| |
expanded
| slot for rendering the content of the expanded row |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.