react-wire-table
A table with classes but almost without styles
Install
npm install --save react-wire-table
Grid properties
// an inner column name and a key to a property if an item is flatindex: 'name'// Label for a columnlabel: 'Label'// pxwidth: 100// inside of the table will perform (item['path']['to']['property']) if an item is not flatpath: 'path.to.property'// to process data before display`#`// if no data providedplaceholder: 'empty'// custom view for a table column header< div > Some data < /div>// for complex view of a cell< div > Some data < /div>
Table properties
// an array of each column specificationsgrid:// an array of items to displayitems:// width of the whole table, a table will stretch if not specified// width: '1200px',width?: 1200// a prefix to add to all classes, 'rwt-' by defaultclassPrefix?: 'project-'// import * as styles from './styles.css'; in a table initialization file// cssModules={styles}cssModules?: {}// If you don't want to provide any headernoHeader?: true// a name of an item field to provide default sortingsortIndex?: 'name'// to say something if you have an empty array of itemsemptyMessage?: <div>NO ITEMS FOR YOU BOY</div>
Usage
import React Component from 'react'import WireTable from 'react-wire-table'const getGrid =index: 'name'label: 'Title'width: 100<a=>#id title</a>index: 'created'path: 'info.created'label: 'Date'width: 100index: 'description'path: 'info.description'label: 'Description'width: 200<div>itemdescription</div>;const items =id: '1'name: 'Live'description: 'Hello World'info:created: '23.07.1991';{const params ={event;;};return<div><WireTable===/></div>}
Base classes
License
MIT © sam0sva1