# react-awesome-table

> React Awesome Table Component

Latest version **0.0.2** (published 2016-09-27) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2016-09-27 |
| First published | 2016-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aurelien Prieur |
| Maintainers | clint42 |

## Links

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

## Dependencies (1)

- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6

## Recent versions

- 0.0.2 (latest) — 2016-09-27
- 0.0.1-c — 2016-09-27
- 0.0.1-b — 2016-09-27
- 0.0.1-a — 2016-09-27
- 0.0.1 — 2016-09-27

## README

# React Awesome Table Component

React Awesome Table Component

## Early Developement Stage
This component is still in early development stage. Breaking changes may occur very frequently.
No default style is present right now so you probably always want to customize at least TableCell.

** This documentation is a first draft. Informations could be out-dated or wrong **

## Documentation

### Basic Usage
```javascript
import { Table, TableDataSource, TableCell, TableRow } from 'react-awesome-table'

const dataSource = new TableDataSource(customInternalComponents);
dataSource.data = data
dataSource.header = header
class MyPage extends React.Component {
    render() {
        return (
            <Table dataSource={dataSource} />
        );
    }
}
```

### TableDataSource Class
You can pass to the TableDataSource constructor custom cell, header cell, row and header row component class like this:
```javascript
const dataSource = new TableDataSource({
    cellComponent: CustomCellComponent,
    headerCellComponent: CustomHeaderCellComponent,
    rowComponent: CustomRowComponent,
    headerRowComponent: CustomHeaderRowComponent
});
```
You can pass no parameters to the constructor, in this case default cells and rows will be use. You can pass one or many custom component in the configuration object, all non specified one will be default.

### Table Component
Properties:
| Property name | Description                    | Type                              |
|---------------|--------------------------------|-----------------------------------|
| dataSource    | An instance of TableDataSource | ReactAwesomeTable.TableDataSource |


### TableCell Component
You should never use TableCell directly so no properties are public.
This is how you create a custom TableCell:
```javascript
class CustomTableCell extends TableCell {
    @override formatData() {
        return this.data;
    }
    
    @override render() {
        return (
            <td>{ this.formatData(); }</td>
        )
    }
}

// Specify here the data type
CustomeTableCell.propTypes.data = React.PropTypes.string
```
By default, data type is object. You do not have to override render and formatData, you may need to override only one of them

# TableRow Component
You should never use TableRow directly so no properties are public.
This is how you create a custom TableRow:
```javascript
class CustomTableRow extends TableRow {
    @override render() {
        return (
            <tr>{ this.getCells() }</tr>
        );
    }
}
```

** It is highly discouraged to override methods that are not listed in this documentation **

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