1.5.0 • Published 6 years ago

react-modular-table v1.5.0

Weekly downloads
144
License
MIT
Repository
github
Last release
6 years ago

react-modular-table NPM version Build Status Dependency Status

table in modular, build your table in components!

Installation

$ npm install --save react-modular-table

Usage

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

propstyperequireddefaultdescription
styleobjectfalse{}customize styles
outerStyleobjectfalse{}customize outerStyles
widthnumbertrue350table width
heightnumbertrue350table 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/>

propstyperequireddefaultdescription
styleobjectfalse{}customize styles
outerStyleobjectfalse{}customize outerStyles
rowHeightnumberfalseheight / total <DivRow/> amountheight 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.

propstyperequireddefaultdescription
styleobjectfalse{}customize styles
outerStyleobjectfalse{}customize outerStyles
cellWidthnumberfalsewidth / total <DivCell/> amountwidth 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

License

MIT © Canner

1.5.0

6 years ago

1.4.0

8 years ago

1.3.0

8 years ago

1.2.0

8 years ago

1.1.0

8 years ago

1.0.0

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago