material-editable-table
v0.0.3
Published
A materialized, static table react component to display JSON data
Downloads
66
Readme
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
editingoreditableediting 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.
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