React-flex-data NPM

React Flex Data

React Flex Data is a minimalistic tables implementations for React. They rely heavily on flexbox and do not use any table dom elements.

Features:

Fully responsive flex box grid tables.
Use flex to create relative table widths.
Handlers for row and cell taps, can be used with the headers for sorting.
Sort of modeled after Material-UI tables but not really.

Not-Features:

No scrolling list
No sorting
No pagination

Prerequisites:

React 14+
react-tap-events-plugin is required.

Getting started

Install react-flex-data using npm.

npm install react-flex-data

Basic Example

import {Table, TableHeader, TableHeaderColumn, TableBody, TableRow, TableRowColumn} from 'react-flex-data';
import _ from 'lodash';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


const DATA = [
    {
        name: 'Han',
        class: 'Rogue',
        skills: 'Piloting, Marksmanship, Guile, Subterfuge',
        primary: 'Blaster'
    },
    {
        name: 'Leia',
        class: 'Leader',
        skills: 'Diplomacy, Finance, Robotics',
        primary: 'Rally'
    },
    {
        name: 'Luke',
        class: 'Jedi',
        skills: 'Swordplay, Force Powers, Moral Ambiguity',
        primary: 'Lightsaber'
    },
    {
        name: 'Chewbaka',
        class: 'Ranger/Berzerker',
        skills: 'Strength, Marksmanship, Wrestling, Pie Eating',
        primary: 'Bowcaster'
    }
];


export default function() {
    return (
        <Table
            rowHeight={25}
            columnRatio={[2,2,4,2]}
            altColor="#cfcfcf"
        >
            <TableHeader>
               {Object.keys(DATA[0]).map((k) => <TableHeaderColumn key={k}>{k}</TableHeaderColumn>)}
            </TableHeader>
            <TableBody>
                {DATA.map((row, i) => {
                    return (
                        <TableRow key={i}>
                            {_.map(row, (col, k) => <TableRowColumn key={`clol_${k}_row_${i}`}>{col}</TableRowColumn>)}
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
}

Properties

rowHeight:Number - height of row in pixels
columnRatio:Array - relative widths of all columns
altColor:String - css color value (uint, rgb, rgba) for alternating rows
<TableRow>.rowInteraction - handler for when clicking on a row. Params: (TapEvent, rowIndex)
<TableRowColumn>.columnInteraction - handler for when clicking on a column. Params: (TapEvent, colIndex)
<TableHeaderColumn>.columnInteraction - handler for when clicking on a header column. Params: (TapEvent, colIndex)