add a large table example

This commit is contained in:
AllenFang 2018-08-05 16:04:38 +08:00
parent 97b9e1097b
commit ffac3a42c5
2 changed files with 35 additions and 1 deletions

View File

@ -0,0 +1,32 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import { productsGenerator } from 'utils/common';
const products = productsGenerator(5000);
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
export default () => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
selectRow={ { mode: 'checkbox' } }
cellEdit={ cellEditFactory({
mode: 'click'
}) }
/>
</div>
);

View File

@ -11,6 +11,7 @@ import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-tab
import NoDataTable from 'examples/basic/no-data-table';
import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
import CaptionTable from 'examples/basic/caption-table';
import LargeTable from 'examples/basic/large-table';
// work on columns
import NestedDataTable from 'examples/columns/nested-data-table';
@ -174,7 +175,8 @@ storiesOf('Basic Table', module)
.add('borderless table', () => <BorderlessTable />)
.add('Indication For Empty Table', () => <NoDataTable />)
.add('Customized id and class table', () => <CustomizedIdClassesTable />)
.add('Table with caption', () => <CaptionTable />);
.add('Table with caption', () => <CaptionTable />)
.add('Large Table', () => <LargeTable />);
storiesOf('Work on Columns', module)
.add('Display Nested Data', () => <NestedDataTable />)