0.1.3 • Published 4 years ago
react-wire-table v0.1.3
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 flat
index: 'name',
// Label for a column
label: 'Label',
// px
width: 100,
// inside of the table will perform (item['path']['to']['property']) if an item is not flat
path: 'path.to.property',
// to process data before display
processFunc: value => `#${value}` ,
// if no data provided
placeholder: 'empty',
// custom view for a table column header
headerRender: () => < div > Some data < /div>,
// for complex view of a cell
reader: () => < div > Some data < /div>,
}
Table properties
{
// an array of each column specifications
grid: [],
// an array of items to display
items: [],
// 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 default
classPrefix?: 'project-',
// import * as styles from './styles.css'; in a table initialization file
// cssModules={styles}
cssModules?: {},
// If you don't want to provide any header
noHeader?: true,
// a name of an item field to provide default sorting
sortIndex?: 'name',
// to say something if you have an empty array of items
emptyMessage?: () => <div>NO ITEMS FOR YOU BOY</div>,
}
Usage
import React, { Component } from 'react'
import WireTable from 'react-wire-table'
const getGrid = params => [
{
index: 'name',
label: 'Title',
width: 100,
render: ({ id, title }) => (
<a
onClick={params.onLinkClick}
>
#{id} {title}
</a>
),
},
{
index: 'created',
path: 'info.created',
label: 'Date',
width: 100,
},
{
index: 'description',
path: 'info.description',
label: 'Description',
width: 200,
render: item => (<div>{item.description}</div>),
},
];
const items = [
{
id: '1',
name: 'Live',
description: 'Hello World',
info: {
created: '23.07.1991',
},
},
];
export default class App extends Component {
render () {
const params = {
onLinkClick: (event) => {
event.preventDefault();
alert('onLinkClick');
},
};
return (
<div>
<WireTable
items={items}
grid={getGrid(params)}
emptyMessage={(
<div style={{ fontSize: '0.7em', lineHeight: '1.3em' }}>There are no items yet.</div>
)}
/>
</div>
)
}
}
Base classes
.rwt-table {
display: flex;
flex-direction: column;
}
.rwt-table__header {}
.rwt-table-header {
background-color: rgba(0, 185, 255, 0.1);
}
.rwt-table__body {}
.rwt-table-body {}
.rwt-table-header__row {}
.rwt-table-body__row {}
.rwt-table-row {
display: flex;
}
.rwt-table-row__cell {}
.rwt-table-cell {
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.rwt-table-cell_in-header {}
button.rwt-table-cell_in-header {}
.rwt-table-cell_in-header .icon {}
.rwt-table-cell_in-body {}
License
MIT © sam0sva1