https://github.com/erikvullings/mithril-table
An editable table component for Mithril
https://github.com/erikvullings/mithril-table
contenteditable mithril mithril-components table
Last synced: 10 months ago
JSON representation
An editable table component for Mithril
- Host: GitHub
- URL: https://github.com/erikvullings/mithril-table
- Owner: erikvullings
- License: mit
- Created: 2019-04-07T08:16:48.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:30:37.000Z (about 3 years ago)
- Last Synced: 2025-02-16T08:15:35.242Z (11 months ago)
- Topics: contenteditable, mithril, mithril-components, table
- Language: TypeScript
- Homepage: https://erikvullings.github.io/mithril-table
- Size: 1.4 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/mithril-table).
```bash
npm i mithril mithril-table
# Also install the typings if you use TypeScript
npm i --save-dev @types/mithril
```
## Usage example
```ts
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),
```
## Build instructions
Using `pnpm` (`npm i -g pnpm`), run the following commands:
```bash
pnpm m i
npm start
```