material-editable-table v0.0.3
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 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
oreditable
editing A boolean value to decide if the table can be edited initially
editable Set this to
true
to enable editing featureOther 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