column An array containing column definitions
```
    {
        tooltip     : "id",     // The value to be displayed when column header is hovered
        readonly    : true,     // If set to true, this column won't be editable even if the editing props of the table is set
        name        : "id"      // The value displayed on the column header
    }
```
items An array containing data in json format
```
    {id: 1, name: "The first line"}
```
showToggle A boolean value to decide if the editing toggle is shown. Note that this value doesn't affect editing or editable
editing A boolean value to decide if the table can be edited initially
editable Set this to true to enable editing feature
[Other Props] Other props not discussed above will be propegated to Table component from material-ui#Table. You can affect table appearance and behaviors there.

Simple Demostration

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Main Window</title>
    </head>
    <body>
        <div id="Table">
        </div>
        <script src="main.entry.js"></script>   <!-- This file is generated using wepack -->
    </body>
</html>

main.js

import React from 'react'
import {render} from 'react-dom';
import JsonMaterialTable from 'material-editable-table';

var column = [
   {tooltip: "id", readonly: true, name: "id"},
   {tooltip: "name", readonly: false, name: "name"}
];

var row = [
    {id: 1, name: "The first line"},
    {id: 2, name: "The second line"}
];


render(<JsonMaterialTable columns={column} items={row} showToggle={true} editable={true} editing={true} />, document.getElementById("Table"));

TODO

This component just fits my needs. To make it more generally useful, there are much more to do, including:

The name in column object is used to reference for the key in each item as well as to represent the header. It should be seperated.
The items to be shown is currently static (i.e. CANNOT be changed from parent components), or the editing feature will break.
More editing type. Currently it's only plain TextField. Auto completing may be a sweet.
Right now this component can be seen as a wrapper component for Table. Create EditableTable and EditableCell components and integrate them into material-ui may increase rendering performance when the table size is huge.

Licence

MIT

Keywords

FAQs

What is material-editable-table?

Is material-editable-table popular?

Is material-editable-table well maintained?

Last updated on 18 Aug 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install