Commit 8a8c2d4

committed

[example] add demo for customized classes and id table

1 parent 3cea965 commit 8a8c2d4Copy full SHA for 8a8c2d4

File tree

+58

-0

lines changed

+58

-0

lines changed

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+import React from 'react';`
	`2`	`+`
	`3`	`+import BootstrapTable from 'react-bootstrap-table-next';`
	`4`	`+import Code from 'components/common/code-block';`
	`5`	`+import { productsGenerator } from 'utils/common';`
	`6`	`+`
	`7`	`+const products = productsGenerator();`
	`8`	`+`
	`9`	`+const columns = [{`
	`10`	`+ dataField: 'id',`
	`11`	`+ text: 'Product ID'`
	`12`	`+}, {`
	`13`	`+ dataField: 'name',`
	`14`	`+ text: 'Product Name'`
	`15`	`+}, {`
	`16`	`+ dataField: 'price',`
	`17`	`+ text: 'Product Price'`
	`18`	`+}];`
	`19`	`+`
	`20`	+const sourceCode = `\
	`21`	`+import BootstrapTable from 'react-bootstrap-table-next';`
	`22`	`+`
	`23`	`+const columns = [{`
	`24`	`+ dataField: 'id',`
	`25`	`+ text: 'Product ID'`
	`26`	`+}, {`
	`27`	`+ dataField: 'name',`
	`28`	`+ text: 'Product Name'`
	`29`	`+}, {`
	`30`	`+ dataField: 'price',`
	`31`	`+ text: 'Product Price'`
	`32`	`+}];`
	`33`	`+`
	`34`	`+<BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />`
	`35`	`+<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />`
	`36`	+`;
	`37`	`+`
	`38`	`+export default () => (`
	`39`	`+ <div>`
	`40`	`+ <h4> Customized table ID </h4>`
	`41`	`+ <BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />`
	`42`	`+`
	`43`	`+ <h4> Customized table className </h4>`
	`44`	`+ <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />`
	`45`	`+`
	`46`	`+ <Code>{ sourceCode }</Code>`
	`47`	`+ </div>`
	`48`	`+);`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';`
`9`	`9`	`import BorderlessTable from 'examples/basic/borderless-table';`
`10`	`10`	`import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';`
`11`	`11`	`import NoDataTable from 'examples/basic/no-data-table';`
	`12`	`+import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';`
`12`	`13`	`import CaptionTable from 'examples/basic/caption-table';`
`13`	`14`
`14`	`15`	`// work on columns`
`@@ -121,6 +122,7 @@ storiesOf('Basic Table', module)`
`121`	`122`	`.add('striped, hover, condensed table', () => <StripHoverCondensedTable />)`
`122`	`123`	`.add('borderless table', () => <BorderlessTable />)`
`123`	`124`	`.add('Indication For Empty Table', () => <NoDataTable />)`
	`125`	`+ .add('Customized id and class table', () => <CustomizedIdClassesTable />)`
`124`	`126`	`.add('Table with caption', () => <CaptionTable />);`
`125`	`127`
`126`	`128`	`storiesOf('Work on Columns', module)`

Lines changed: 7 additions & 0 deletions

Lines changed: 1 addition & 0 deletions

Comments

(0)