Home

Awesome

svelte-table

A relatively minimal table component. Allows sorting and filtering based on column values, and row selection/expanding.

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"

<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>

Sample Data and config

// define some sample data...
const rows = [
  { id: 1, first_name: "Marilyn", last_name: "Monroe", pet: "dog" },
  { id: 2, first_name: "Abraham", last_name: "Lincoln", pet: "dog" },
  { id: 3, first_name: "Mother", last_name: "Teresa", pet: "" },
  { id: 4, first_name: "John F.", last_name: "Kennedy", pet: "dog" },
  { id: 5, first_name: "Martin Luther", last_name: "King", pet: "dog" },
  { id: 6, first_name: "Nelson", last_name: "Mandela", pet: "cat" },
  { id: 7, first_name: "Winston", last_name: "Churchill", pet: "cat" },
  { id: 8, first_name: "George", last_name: "Soros", pet: "bird" },
  { id: 9, first_name: "Bill", last_name: "Gates", pet: "cat" },
  { id: 10, first_name: "Muhammad", last_name: "Ali", pet: "dog" },
  { id: 11, first_name: "Mahatma", last_name: "Gandhi", pet: "bird" },
  { id: 12, first_name: "Margaret", last_name: "Thatcher", pet: "cat" },
  { id: 13, first_name: "Christopher", last_name: "Columbus", pet: "dog" },
  { id: 14, first_name: "Charles", last_name: "Darwin", pet: "dog" },
  { id: 15, first_name: "Elvis", last_name: "Presley", pet: "dog" },
  { id: 16, first_name: "Albert", last_name: "Einstein", pet: "dog" },
  { id: 17, first_name: "Paul", last_name: "McCartney", pet: "cat" },
  { id: 18, first_name: "Queen", last_name: "Victoria", pet: "dog" },
  { id: 19, first_name: "Pope", last_name: "Francis", pet: "cat" },
  // 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: "pet",
    title: "Pet",
    value: v => v.pet,
    renderValue: v => v.pet.charAt(0).toUpperCase() + v.pet.substring(1), // capitalize
    sortable: true,
    filterOptions: ["bird", "cat", "dog"], // provide array
  },
];

Props

OptionTypeDescription
columnsObject[]column config (details below)
rowsObject[]row (data) array
sortByString‡ Sorting key
sortOrderNumber1 = Ascending, -1 Descending, 0 no filtering
sortOrdersNumber[]availability of order options
iconAscString(html) override ascending order indication
iconDescString(html) override descending order indication
iconFilterableString(html) override filterable column indication
iconExpandStringrow collapsed indicator/button
iconExpandedStringrow expanded indicator/button
iconSortableStringindicate column is sortable
classNameTableString/Arrayoptional class name(s) for table element
classNameTheadString/Arrayoptional class name(s) for thead element
classNameTbodyString/Arrayoptional class name(s) for tbody element
classNameSelectString/Arrayoptional class name(s) for filter select elements
classNameInputString/Arrayoptional class name(s) for search input elements
classNameRowString/functionoptional class name(s) for row elements. Supports passing function
classNameRowExpandedString/Arrayoptional class name(s) for expanded row
classNameExpandedContentString/Arrayoptional class name(s) for expanded row content
classNameRowSelectedString/Arrayoptional class name(s) for selected row
classNameCellString/Arrayoptional class name(s) for cell elements
classNameCellExpandString/Arrayoptional class name(s) for cell with expand icon
expandedString[]optional array of key values of expanded rows
expandRowKeyStringoptional deprecated use rowKey
rowKeyStringoptional key for expanded or selected row (use unique values like id)
expandSingleBooleanoptional default: false allow only one row to be selected
selectedString[]optional array of key values of selected rows
selectSingleBooleanoptional default: false allow only one row to be selected
selectOnClickBooleanoptional default: false will clicking on row will update selection
filterSelectionsObject[]optional search or filter selection
showExpandIconBooleanshould a expand column be visible

field allows 2-way binding

Events

Events pass a CustomEvent object with the following params in the detail object

eventdetail parametersDescription
clickColevent, col, keyclick on column
clickRowevent, rowclick on a row
clickCellevent, row, keyclick on a cell
clickExpandevent, rowclick expand

Expanding Rows

Example:

<div class="row">
  <SvelteTable
    columns="{cols}"
    rows="{data}"
    showExpandIcon="{true}"
    expandSingle="{true}"
    rowKey="id"
  >
    <svelte:fragment slot="expanded" let:row>{row.detail}</svelte:fragment>
  </SvelteTable>
</div>

Selecting Rows

Filtering order

Providing sortOrders specifies the column filtering orders. sortOrders = [1, -1, 0] indicates that the row will be sorted ascending (1), then descending (-1), then going back without any filter (0),

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)

<script>
  const selection = { first_name: "A" };
</script>
<SvelteTable
  columns="{columns}"
  rows="{data}"
  bind:filterSelections="{selection}"
/>

Column array object values

OptionTypeDescription
keyStringUnique key identifying the column
titleStringTitle for header
valueFunctiontable cell value. The function is passed row data
[class]Stringoptional table cell class name
[sortable]Booleanoptional Whether the table can be sorted on column
[searchValue]Functionoptional search value function. function is passed row data.
[filterOptions]Array/Functionoptional array of objects with name and value. Function is provided array of rows
[filterValue]Stringoptional value to filter on, usually same as value
[filterPlaceholder]Stringoptional placeholder attribute for the filter input or select dropdown
[hideFilterHeader]Booleanoptional will hide search or filter input in header
[headerClass]Stringoptional class to assign to header element
[headerFilterClass]Stringoptional class to assign to search/filter header element
[renderValue]Functionoptional render function for rendering html content
[renderComponent]Componentoptional pass a Svelte component, it will receive row and col variables (replaces renderValue)
[parseHTML]Booleanoptional if true, it will render the cell value with @html

searchValue

Option 1: searchValue(row, searchTerm):boolean

Define a function that accepts a row and the searchTerm, the comparison is defined within the function and the match is returned in the form of a boolean.

This is the recommended way of using the search (added in v0.5.3)

Option 2: searchValue(row):string

Define a function that accepts a row and returns a string. SveltTable does the comparison internally, but only supports case-insensitive compare using includes

This behaviour is set for deprecation and should not be used.

If you want to migrate the existing behaviour you can use this example:

searchValue: (v, s) =>
  v["some_key"].toString().toLowerCase().includes(s.toLowerCase()),

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

OptionDescription
headerslot for rendering the tr and th content. This will replace title in the header
rowslot for rendering the tr and td content. This will replace the rendering of renderValue
expandedslot for rendering the content of the expanded row

Conditional row and cell class names

By passing a function to classNameRow the rows can have class assigned for the tr element based on the row value. The function is provided two arguments, the row value, and the row index.

// classNameRow function type definition
(row: Row, rowIndex?: number) => string | null;

This is an example of using the row index make a striped table, which may be needed when rows are expandable.

(row, rowIndex) => (rowIndex % 2 == 0 ? null : "row-odd");

Individual cells can also be formatted by passing a function to the class prop in the column object. The class function is provided three parameters. In addition to the row and rowIndex, it also provides the column index

// classs function type definition
(row: Row, rowIndex?: number, colIndex?: number) => string | null;

example for a checker-board pattern:

(row, rowIndex, colIndex) =>
  (rowIndex + colIndex) % 2 == 0 ? null : "cell-odd";

example using a value from the row object:

row => row.count > 10 && "cell-valid";