# react-redux-table

> A data-table made with react and redux

Latest version **1.0.0** (published 2021-10-05) · 0 weekly downloads

## Install

```sh
npm install react-redux-table
pnpm add react-redux-table
yarn add react-redux-table
bun add react-redux-table
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-10-05 |
| First published | 2021-09-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 56.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | https://github.com/ExvigilareGemini |
| Maintainers | exvigilaregemini |
| Keywords | table, datatable, react, reactjs, redux, react-component, ui, redux-table |

## Links

- npm: https://www.npmjs.com/package/react-redux-table
- Repository: https://github.com/ExvigilareGemini/react-redux-table
- Homepage: https://github.com/ExvigilareGemini/react-redux-table#readme
- Issues: https://github.com/ExvigilareGemini/react-redux-table/issues
- npm.io page: https://npm.io/package/react-redux-table

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.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.0 (latest) — 2021-10-05
- 0.1.24 — 2021-10-04
- 0.1.23 — 2021-10-03
- 0.1.22 — 2021-10-03
- 0.1.21 — 2021-10-03
- 0.1.20 — 2021-10-03
- 0.1.19 — 2021-10-03
- 0.1.18 — 2021-10-03
- 0.1.17 — 2021-10-03
- 0.1.16 — 2021-10-02
- 0.1.15 — 2021-10-02
- 0.1.14 — 2021-09-29
- 0.1.13 — 2021-09-28
- 0.1.12 — 2021-09-28
- 0.1.11 — 2021-09-28
- … 10 more at https://npm.io/package/react-redux-table/versions

## README

# React-redux-table

---

---

A modular table made with [React], [Redux] and [React-Redux].

## Installation

---

```sh
npm i react-redux-table
or
yarn add react-redux-table
```

## Prerequisite

---

You must install and configure [React], [Redux] and [React-Redux] in your project.

## Redux state & configuration

---

### *State*

React-redux-table state must be present in the store inside the object `rrtable`.

### *Configuration*

You must add `rrtableReducer` to your project using [combineReducers] in the name of `rrtable`.

#### - combineReducers

```sh
import { rrtableReducer } from "react-redux-table";

export const rootReducer = combineReducers({
  yourReducer: yourReducer,
  rrtable: rrtableReducer,
});

```

## Usage

---

```sh
import React from 'react';
import Table from 'react-redux-table';

class Component extends React.Component {
    render {
        <>
            <Table
              headersArray={headersArray}
              rowsContent={rowsContent}
              title="Your title"
              filter={true}
              entriesSelector={entriesSelector}
              showEntries={true}
              hideButtons={false}
            />
        </>
    }
}
```

### Props

- `headersArray` {[object]} : the content of column headers - 
```sh
headersArray = [...{title: "your title", category: "yourCategory"},]
```
- `rowsContent` {[[object]]} : the content of rows
```sh
rowsContent = [
    ...[
           ...{cellValue: "value", category: "yourCorrespondingCategory"},
       ],
]
```
- `title` {string} [optional] : the title of the table
- `filter` {bool} [optional] : wether the filtering functionality is present
- `entriesSelector` {[string]} [optional] : the selector of displayed rows by page
- `showEntries` {bool} [optional] : wether the actual status along pages is displayed
- `hideButtons` {bool} [optional] : true to hide buttons

## Example 1
```sh
import { Table } from "react-redux-table";

const headArray = [
  { title: "First Name", category: "firstName" },
  { title: "Last Name", category: "lastName" },
];

const rowsArray = [
  [
    { cellValue: "Nicolas", category: "firstName" },
    { cellValue: "Tesla", category: "lastName" },
  ],
  [
    { cellValue: "Leonardo", category: "firstName" },
    { cellValue: "Da Vinci", category: "lastName" },
  ],
  [
    { cellValue: "Sherlock", category: "firstName" },
    { cellValue: "Holmes", category: "lastName" },
  ],
];

function App() {
  return (
    <>
      <Table headersArray={headArray} rowsContent={rowsArray} />
    </>
  );
}
```

![alt text](https://raw.githubusercontent.com/ExvigilareGemini/srcImage/main/img/rrtable-neutral.PNG)

---

## Example 2
```sh
import { Table } from "react-redux-table";

const headArray = [
  { title: "First Name", category: "firstName" },
  { title: "Last Name", category: "lastName" },
];

const rowsArray = [
  [
    { cellValue: "Nicolas", category: "firstName" },
    { cellValue: "Tesla", category: "lastName" },
  ],
  [
    { cellValue: "Leonardo", category: "firstName" },
    { cellValue: "Da Vinci", category: "lastName" },
  ],
  [
    { cellValue: "Sherlock", category: "firstName" },
    { cellValue: "Holmes", category: "lastName" },
  ],
];

function App() {
  return (
    <>
      <Table
        headersArray={headArray}
        rowsContent={rowsArray}
        title="Famous people"
        filter={true}
        entriesSelector={[10, 100]}
        showEntries={true}
        hideButtons={true}
      />
    </>
  );
}
```
![alt text](https://raw.githubusercontent.com/ExvigilareGemini/srcImage/main/img/rrtable-full-params.PNG)

[react-redux]: https://github.com/reactjs/react-redux
[react]: https://github.com/facebook/react
[redux]: https://github.com/reactjs/redux
[combinereducers]: https://redux.js.org/api/combinereducers
[configurestore]: https://redux.js.org/usage/configuring-your-store#the-solution-configurestore
[@reduxjs/toolkit]: https://redux.js.org/introduction/getting-started

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