material-editable-table
A materialized, editable table react component to display JSON data Inspired by react-json-table and material-ui-table-edit.
This table component provides an ituitive way to view data and edit them.
Installation
npm install --save material-editable-table
Available Props
-
column An array containing column definitions
tooltip : "id" // The value to be displayed when column header is hoveredreadonly : true // If set to true, this column won't be editable even if the editing props of the table is setname : "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
oreditable
-
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
Main Window <!-- This file is generated using wepack -->
- main.js
;; 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"; ;
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