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
;;;; 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' ; { return <Table rowHeight=25 columnRatio=2242 altColor="#cfcfcf" > <TableHeader> Object </TableHeader> <TableBody> DATA </TableBody> </Table> ;}
Properties
rowHeight:Number
- height of row in pixelscolumnRatio:Array
- relative widths of all columnsaltColor: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)