# react-flex-data

> Simple minimal flex only table implementation

Latest version **2.0.2** (published 2017-11-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-flex-data
pnpm add react-flex-data
yarn add react-flex-data
bun add react-flex-data
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2017-11-01 |
| First published | 2016-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | WILDLIFE.LA |
| Maintainers | samhunta, rt2zz, pr1ntr |
| Keywords | react, tables, flex, data, minimal |

## Links

- npm: https://www.npmjs.com/package/react-flex-data
- Repository: https://github.com/wildlifela/react-flex-data
- Homepage: http:
- npm.io page: https://npm.io/package/react-flex-data

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.13.1
- [inline-style-prefixer](https://npm.io/package/inline-style-prefixer.md) ^1.0.4

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2017-11-01
- 2.0.1 — 2017-10-09
- 2.0.0 — 2017-10-09
- 1.2.0 — 2017-05-16
- 1.1.2 — 2016-07-06
- 1.1.1 — 2016-07-06
- 1.1.0 — 2016-07-06
- 1.0.7 — 2016-06-17
- 1.0.6 — 2016-06-10
- 1.0.5 — 2016-06-10
- 1.0.4 — 2016-06-10
- 1.0.3 — 2016-06-10
- 1.0.2 — 2016-06-06
- 1.0.1 — 2016-06-06
- 1.0.0 — 2016-06-06

## README

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](https://github.com/zilverline/react-tap-event-plugin) is required.



Getting started
---------------

Install `react-flex-data` using npm.

```shell
npm install react-flex-data
```

### Basic Example

```javascript
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)`

---
_Source: https://npm.io/package/react-flex-data · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._