# interactive-react-table

> An interactive table component using react

Latest version **1.1.1** (published 2022-04-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install interactive-react-table
pnpm add interactive-react-table
yarn add interactive-react-table
bun add interactive-react-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.1.1 |
| Published | 2022-04-22 |
| First published | 2022-03-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mekaa |
| Maintainers | mekaa |

## Links

- npm: https://www.npmjs.com/package/interactive-react-table
- npm.io page: https://npm.io/package/interactive-react-table

## Recent versions

- 1.1.1 (latest) — 2022-04-22
- 1.1.0 — 2022-04-18
- 1.0.15 — 2022-04-18
- 1.0.14 — 2022-04-18
- 1.0.13 — 2022-04-13
- 1.0.12 — 2022-04-11
- 1.0.11 — 2022-04-07
- 1.0.10 — 2022-04-07
- 1.0.9 — 2022-04-06
- 1.0.8 — 2022-04-05
- 1.0.7 — 2022-04-05
- 1.0.6 — 2022-03-31
- 1.0.5 — 2022-03-29
- 1.0.4 — 2022-03-29
- 1.0.3 — 2022-03-29

## README

# React Table

A react component to easily create an interactive table.

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)  
[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=bugs)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)
[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=RmiMekaa_React-Table&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=RmiMekaa_React-Table)

#### Features
- Column sorting
- Data search
- Pagination
- Entries counter
- Responsive design

## Installation

Prerequisites: [React](https://fr.reactjs.org/)
```
npm i interactive-react-table
```
-----------------

## Basic Usage Example

Import the component:
```
import { default as ReactTable } from 'interactive-react-table';
```

Set some data:
```
const data = [
  {
    firstName: 'Bruce',
    lastName: 'Wayne',
    birthdate: '1939-03-30',
    city: 'Gotham City'
  },
  {
    firstName: 'Peter',
    lastName: 'Parker',
    birthdate: '1962-08-15',
    city: 'New York'
  },
  {
    firstName: 'Clark',
    lastName: 'Kent',
    birthdate: '1939-06-12',
    city: 'Metropolis'
  }
]
```

Config headers:
```
const headers = [
  {
    name: 'First Name',
    key: 'firstName'
  },
  {
    name: 'Last Name',
    key: 'lastName'
  },
  {
    name: 'Date of birth',
    key: 'birthdate'
  },
  {
    name: 'City',
    key: 'city'
  }
]
```

Use component:
```
<ReactTable data={data} headers={headers} />
```

Render:  
<img src='https://github.com/RmiMekaa/React-Table/blob/master/img/basicExample.jpg' alt='basic example' />

-----------------

## Props

- `data: {Array<Objects>}`  
  - Required
  - The data you want to display in the table.
  - To ensure a good behavior, make sure that each object have the same properties structure.
  
- `headers : {Array<Objects>}`  
  - Required
  - Handle table columns headers.
  - Each object must contain two properties:
    - name : The name to display in the column header
    - key : A string which refers to the corresponding property name. 
  - The items in this array must follow the same order as the data objects properties. 

- `pageSizeOptions : {Array<Numbers>}`  
  - Optional
  - Default: [10, 25, 50]
  - Providing options to configure the number of rows per page.

- `defaultSorting : {Object}`  
  - Optional
  - Default: undefined (No sorting)
  - Provide default sorting settings
  - The object must contains two properties:
    - property : The property you want to sort by
    - order : The sorting order, must be 'ascending' or 'descending'
  - Example : { property : "firstName", order: "ascending" }

- `displayEntries : {Boolean}`  
  - Optional
  - Default: true
  - Disable entries displayer feature by setting it to false

- `allowSearch : {Boolean}`
  - Optional
  - Default: true
  - Disable search feature by setting it to false

- `selectPageSize : {Boolean}`
  - Optional
  - Default: true
  - Disable page size selector feature by setting it to false

-----------------

## Customize Style

Just write some styles for class `.mainContainer` . Your styles will be prioritized over library styles, then target the following selectors to customize what you want.

### Header
  - Container: `.tableHeader `
    - Select page size section: `.selectPageSize` 
    - Search section: `.search` 

### Table
  - Container: `.table` 
    - Table headers (th): `.table-th`  
      You can target a specific header by index using: `.table-th-1`, `.table-th-2`, `.table-th-3`, etc.
    - Table headers content: `.table-th-content` 
    - Sort Icons: `.table-th-sortIcons` 
    - Active sort icon: `.sortIcon--active` 
    - Table rows (tr): `.table-tr`  
      You can target a specific row by index using: `.table-tr-1`, `.table-tr-2`, `.table-tr-3`, etc.
    - Table data cells (td): `.table-td`

### Footer
  - Container: `.tableFooter`
    - Entries displayer: `.entriesDisplayer`
    - Pagination section: `.pagination`
    - Pagination buttons: `.pagination button`
    - Pagination current page button: `.pagination button.currentPage`

#### Example:

<img src='https://github.com/RmiMekaa/React-Table/blob/master/img/customStyleExample.jpg' alt='custom style example' />

See full documentation [here](https://rmimekaa.github.io/React-Table/)  
Hope it helps !

<p float='left'>
  <img alt='CSS3' title='CSS3' src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg' width='32px'/>
  <img alt='JavaScript' title='JavaScript' src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-plain.svg' width='32px'/>
  <img alt='React' title='React' src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg' width='32px'/>
  <img alt='Storybook' title='Storybook' src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/storybook/storybook-original.svg' width='32px'/>
</p>

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