https://github.com/chilijung/react-modular-table

A modular table in react
https://github.com/chilijung/react-modular-table

Last synced: 5 days ago
JSON representation

A modular table in react

• Host: GitHub
• URL: https://github.com/chilijung/react-modular-table
• Owner: chilijung
• License: mit
• Created: 2016-09-30T10:54:26.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-11T09:02:57.000Z (over 6 years ago)
• Last Synced: 2024-10-11T08:16:28.202Z (28 days ago)
• Language: JavaScript
• Homepage: https://chilijung.github.io/react-modular-table/
• Size: 909 KB
• Stars: 0
• Watchers: 4
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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(

  

  	

  		

  			row1, column1

  		

  		

  			row1, column2

  		

  	

  	

  		

  			row2, column1

  		

  		

  			row2, column2

  		

  	

  	

  		

  			row3, column1

  		

  		

  			row3, column2

  		

  	

  

, document.getElementById('root'));

```

## Components for **\
** Table


### \

Using `
` to build your table, it's children **should only be** ``


| **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 `` will pass to the `
` directly.


In other words, `` is just like ``.

### \

Using `
` to build your table row, it's children **should only be** ``


| **props** | **type** | **required** | **default** | **description**  |

|-----------|----------|--------------|-------------|------------------|

| style     | object   | false        | {}          | customize styles |

| outerStyle  | object   | false         | {}         | customize outerStyles      |

| rowHeight  | number   | false         | height / total `` amount         | height of the row      |

other props (other than the props above) send to `` will pass to the `
` directly.


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

In other words, `` is just like ``.

### \

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 `` amount         | width of the cell      |

other props (other than the props above) send to `` will pass to the `
` directly.


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

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

In other words, `` is just like ``.

## Start example server

```

npm start

```

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