mithril-table

A Mithril component for generating an editable table.

Features:

• Specify the header names
• Specify the column order (using the header order)
• Disable the table, making it an ordinary table
• Adding, deleting, moving and sorting rows

Installation

Pull it from npm.

npm i mithril mithril-table
# Also install the typings if you use TypeScript
npm i --save-dev @types/mithril

Usage example

import { EditableTable, IEditableTable } from 'mithril-table';
import m from 'mithril';

...
  interface IPerson { id: number; first: string; last: string; }

  const state = {
    data: [{
      id: 1,
      first: 'John',
      last: 'Doe',
    }, {
      id: 2,
      first: 'Jane',
      last: 'Doe',
    }, {
      id: 3,
      first: 'Bob',
      last: 'Bear',
    }] as IPerson[],
  };

  m(EditableTable, {
    // Optional, to specify the order of the columns and their header
    headers: [
      { column: 'id', title: 'ID' },
      { column: 'first', title: 'First name' },
      { column: 'last', title: 'Last name' },
    ],
    data: state.data,
    addRows: true,
    deleteRows: true,
    moveRows: true,
    // disabled: true,
    // sortRows: false,
    onchange: (data) => {
      state.data = data;
      console.table(data);
    },
  } as IEditableTable<IPerson>),

Build instructions

Using pnpm (npm i -g pnpm), run the following commands:

pnpm m i
npm start