# reaco-table-list

> A React table component designed to allow presenting thousands of rows of data.

Latest version **1.0.8** (published 2017-10-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install reaco-table-list
pnpm add reaco-table-list
yarn add reaco-table-list
bun add reaco-table-list
```

## 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 | 1.0.8 |
| Published | 2017-10-11 |
| First published | 2017-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Rahul Bansal |
| Maintainers | rahulbansal-ofb |
| Keywords | react, react-component, table, data-table, fixed-table |

## Links

- npm: https://www.npmjs.com/package/reaco-table-list
- Repository: https://github.com/ofbusiness/reaco/tree/master/src/components/table-list
- npm.io page: https://npm.io/package/reaco-table-list

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [dateformat](https://npm.io/package/dateformat.md) ^3.0.2
- [reaco-pagination](https://npm.io/package/reaco-pagination.md) ^1.0.8
- [fixed-data-table-2](https://npm.io/package/fixed-data-table-2.md) ^0.8.1

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

- 1.0.8 (latest) — 2017-10-11
- 1.0.7 — 2017-10-11
- 1.0.6 — 2017-10-10
- 1.0.5 — 2017-10-10
- 1.0.4 — 2017-10-10
- 1.0.3 — 2017-10-10
- 1.0.2 — 2017-10-10
- 1.0.1 — 2017-10-05
- 1.0.0 — 2017-10-05

## README

# REACO-TABLE-LIST

Reaco-Table-List is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of Reaco-Table-List and it's architected in a way to allow for flexibility and extensibility.

Reaco-Table-List is written over [schrodinger/fixed-data-table-2](https://github.com/schrodinger/fixed-data-table-2).
For pagination it uses [Reaco-Pagination](https://github.com/ofbusiness/reaco/tree/master/src/components/pagination), so you can directly use its properties here to manage pagination.

Features of Reaco-Table-List:
* Fixed headers and footer
* Fluid column widths
* Resizable columns
* Expanded rows
* Both fixed and scrollable columns
* Handling huge amounts of data
* Variable row heights (with adaptive scroll positions)
* Column resizing
* Performant scrolling
* Customizable styling
* Jumping to a row or column
* Controlled scroll API allows touch support
* Tooltips
* Responsive Resize
* Column Groups

## Installation

Using npm:
```shell
$ npm install --save reaco-table-list
```

### Code example

```javascript
import React, { Component } from 'react';
import TableList from 'reaco-table-list';

// fixed variables for pagination
const total = 150;
const dataSize = 10;

// table config 
const tableConfig = {
    sortUpIcon: '↡',
    sortDownIcon: '↟',
    sortByField: null,
    sortDirection: null,
    sortCallback: null,
    columns: {
      name: {
        header: 'name',
        type: 'link',
        width: 100,
        sortEnable: true,
      },
      age: {
        header: 'age',
        type: 'text',
        width: 100,
      },
      dob: {
        header: 'dob',
        type: 'date',
        dateFormat: 'MM DD YYYY',
        width: 50,
      }
    },
    data: [{
        name: {
            value: 'foo',
            title: 'this is foo',
            url: 'https://github.com/ofbusiness/reaco',
        },
        age: {
            value: 30,
        },
        dob: {
            value: (new Date()),
        }
        }, {
        name: {
            value: 'bar',
            title: 'this is foo',
            url: 'https://github.com/ofbusiness/reaco',
        },
        age: {
            value: 25,
        },
        dob: {
            value: (new Date()),
        }
    }],
};

// finally the component to be render
<TableList 
      tableConfig={tableConfig} 
      rowsCount={10} 
      forcePage={1}
      total={100} 
      size={10} 
      dataSize={10}
      handlePageChange={this.onPageChange}
      handlePageOptionChange={this.onPageOptionChange} />
```

See the [App.js](https://github.com/ofbusiness/reaco/blob/master/src/App.js) for complete code example.

## Props
| Name                          | Type        | Description                                                                             |
| ---                           | ---         | ---                                                     
| `tableConfig`                 | `Object`    | **Required.** The complete configuration of table data. See [Code Example](#code-example) for detail.
| `rowsCount`                   | `Number`    | **Required.** The least number of rows per page i.e there may be less items on last page in compare to maximum count per page.  
| `total`                       | `Number`    | **Required.** The total number of data across the pages.
| `size`                        | `Number`    | **Required.** The total number of maximum rows per page i.e per page count.
| `dataSize`                    | `Number`    | **Required.** The least number of rows per page i.e there may be less items on last page in compare to maximum count per page.
| `width`                       | `Number`    | **Optional.** The width of table.  
| `height`                      | `Number`    | **Optional.** The height of table. 
| `headerHeight`                | `Number`    | **Optional.** The height of header. 
| `rowHeight`                   | `Number`    | **Optional.** The height of each row.  
| `forcePage`                   | `Number`    | **Optional.** This is current page index will be use by pagination component.

See the full Documentation of **fixed-data-table-2** [here](https://github.com/schrodinger/fixed-data-table-2).

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