# react-modular-table

> table in modular

Latest version **1.5.0** (published 2018-04-11) · MIT license · 0 weekly downloads

## Install

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

## 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.5.0 |
| Published | 2018-04-11 |
| First published | 2016-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | chilijung |
| Maintainers | chilijung |
| Keywords | modular, table, react |

## Links

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

## Dependencies (2)

- [warning](https://npm.io/package/warning.md) ^3.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.5

## 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.5.0 (latest) — 2018-04-11
- 1.4.0 — 2016-10-05
- 1.3.0 — 2016-10-04
- 1.2.0 — 2016-10-03
- 1.1.0 — 2016-10-02
- 1.0.0 — 2016-10-02
- 0.2.0 — 2016-09-30
- 0.1.0 — 2016-09-30

## README

# react-modular-table [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> table in modular, build your table in components!

## Installation

```sh
$ npm install --save react-modular-table
```

## Usage

```js
import {DivRow, DivTable, DivCell} from 'react-modular-table';

ReactDOM.render(
  <DivTable>
  	<DivRow>
  		<DivCell>
  			row1, column1
  		</DivCell>
  		<DivCell>
  			row1, column2
  		</DivCell>
  	</DivRow>
  	<DivRow>
  		<DivCell>
  			row2, column1
  		</DivCell>
  		<DivCell>
  			row2, column2
  		</DivCell>
  	</DivRow>
  	<DivRow>
  		<DivCell>
  			row3, column1
  		</DivCell>
  		<DivCell>
  			row3, column2
  		</DivCell>
  	</DivRow>
  </DivTable>
, document.getElementById('root'));


```

## Components for **\<Div/\>** Table

### \<DivTable/\>

Using `<div/>` to build your table, it's children **should only be** `<DivRow/>`

| **props** | **type** | **required** | **default** | **description**  |
|-----------|----------|--------------|-------------|------------------|
| style     | object   | false        | {}          | customize styles |
| outerStyle     | object   | false        | {}          | customize outerStyles |
| width     | number   | true         | 350         | table width      |
| height    | number   | true         | 350         | table height     |

other props (other than the props above) send to `<DivTable/>` will pass to the `<div/>` directly.

In other words, `<DivTable/>` is just like `<table/>`.

### \<DivRow/\>

Using `<div/>` to build your table row, it's children **should only be** `<DivCell/>`

| **props** | **type** | **required** | **default** | **description**  |
|-----------|----------|--------------|-------------|------------------|
| style     | object   | false        | {}          | customize styles |
| outerStyle  | object   | false         | {}         | customize outerStyles      |
| rowHeight  | number   | false         | height / total `<DivRow/>` amount         | height of the row      |

other props (other than the props above) send to `<DivRow/>` will pass to the `<div/>` directly.

You can get row height via `data-rowHeight` attribute.

In other words, `<DivRow/>` is just like `<tr/>`.

### \<DivCell/\>

the smallest component for the div table. Use to define the cells.

| **props** | **type** | **required** | **default** | **description**  |
|-----------|----------|--------------|-------------|------------------|
| style     | object   | false        | {}          | customize styles |
| outerStyle  | object   | false         | {}         | customize outerStyles      |
| cellWidth  | number   | false         | width / total `<DivCell/>` amount         | width of the cell      |

other props (other than the props above) send to `<DivCell/>` will pass to the `<div/>` directly.

You can get row height via `data-rowHeight` attribute.

You can get cell width via `data-cellWidth` attribute.

In other words, `<DivCell/>` is just like `<td/>`.

## Start example server

```
node devServer.js
```

## Maintainer

[chilijung](https://github.com/chilijung)

## License

MIT © [Canner](https://github.com/canner)


[npm-image]: https://badge.fury.io/js/react-modular-table.svg
[npm-url]: https://npmjs.org/package/react-modular-table
[travis-image]: https://travis-ci.org/Canner/react-modular-table.svg?branch=master
[travis-url]: https://travis-ci.org/Canner/react-modular-table
[daviddm-image]: https://david-dm.org/Canner/react-modular-table.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/Canner/react-modular-table

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