This table component provides an ituitive way to view data and edit them.
npm install --save material-editable-table
column An array containing column definitionstooltip : "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 formatid: 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 A boolean value to decide if the table can be edited initially
editable Set this to
trueto 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.
Main Window<!-- This file is generated using wepack -->
;;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";;
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.