A relatively minimal svelte table example. Allows sorting and filtering based on column values.
npm install -save svelte-table
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"
<script>
import SvelteTable from "svelte-table";
const rows = [
/** data (example below) */
];
const columns = [
/** columns config (example below) */
];
</script>
<SvelteTable columns="{columns}" rows="{rows}"></SvelteTable>
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.
<script src="iife/SvelteTable.js"></script>
<div id="my-table"></div>
<script>
var rows = [
/** data (example below) */
];
var columns = [
/** columns config (example below) */
];
new SvelteTable({
target: document.querySelector("#my-table"),
props: { rows, columns },
});
</script>
// 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
},
];
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 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
- 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 therow
object in theevent.detail
object. expandSingle
can be set to true to only allow a single column open at a time (only works whenexpanded
is managed internally)
Example:
<div class="row">
<SvelteTable
columns="{cols}"
rows="{data}"
showExpandIcon="{true}"
expandSingle="{true}"
expandRowKey="id"
>
<svelte:fragment slot="expanded" let:row>{row.detail}</svelte:fragment>
</SvelteTable>
</div>
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
)
<script>
const selection = { first_name: "A" };
</script>
<SvelteTable
columns="{columns}"
rows="{data}"
bind:filterSelections="{selection}"
/>
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 ) |
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",
},
},
},
];
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 |