# @sstur/react-data-components

> React data components

Latest version **99.1.8** (published 2016-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sstur/react-data-components
pnpm add @sstur/react-data-components
yarn add @sstur/react-data-components
bun add @sstur/react-data-components
```

## 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 | 99.1.8 |
| Published | 2016-07-09 |
| First published | 2016-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Carlos Rocha |
| Maintainers | sstur |
| Keywords | react, react-component, table, pagination |

## Links

- npm: https://www.npmjs.com/package/@sstur/react-data-components
- Repository: https://github.com/sstur/react-data-components
- Homepage: https://github.com/sstur/react-data-components#readme
- Issues: https://github.com/sstur/react-data-components/issues
- npm.io page: https://npm.io/package/@sstur/react-data-components

## 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

- 99.1.8 (latest) — 2016-07-09
- 99.1.7 — 2016-07-09

## README

# react-data-components

DataTable: [Live demo and source](http://jsbin.com/ziyawu/1/).

## Getting started

```sh
npm install react-data-components --save
```

### Using the default implementation

The default implementation includes a filter for case insensitive global search,
pagination and page size.

```javascript
var React = require('react');
var DataTable = require('react-data-components').DataTable;

var columns = [
  { title: 'Name', prop: 'name'  },
  { title: 'City', prop: 'city' },
  { title: 'Address', prop: 'address' },
  { title: 'Phone', prop: 'phone' }
];

var data = [
  { name: 'name value', city: 'city value', address: 'address value', phone: 'phone value' }
  // It also supports arrays
  // [ 'name value', 'city value', 'address value', 'phone value' ]
];

React.render((
    <DataTable
      className="container"
      keys={[ 'name', 'address' ]}
      columns={columns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'city', order: 'desc' }}
      pageLengthOptions={[ 5, 20, 50 ]}
    />
  ), document.body);
```

See [complete example](example/table/main.js), see [Flux example](example/flux/).

## DataMixin options

Name                | Type               | Description
------------------- | ------------------ | ----------------------------------
`keys`              | array              | Properties that make each row unique, e.g. an id.
`columns`           | array              | See column options.
`pageLengthOptions` | array              | Page length options.
`initialData`       | array              | The data to display.
`initialPageLength` | number             | Initial page length.
`initialSortBy`     | object             | Initial sorting, needs `prop` and `order`.

## Table column options

Name             | Type               | Description
---------------- | ------------------ | ----------------------------------
`title`          | string             | The title to display on the header.
`prop`           | string or number   | The name of the property or index on the data.
`render`         | function           | Function to customize the render on column.
`className`      | string or function | Class for the td.
`defaultContent` | string             | The default value to display if no data.
`sortable`       | boolean            | `true` by default.
`width`          | string or number   | Width for the column.

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