refine large table example

This commit is contained in:
AllenFang 2018-10-10 23:54:11 +08:00
parent 185c184f01
commit dd54294382

View File

@ -1,10 +1,9 @@
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(5);
const products = productsGenerator(3000);
const columns = [{
dataField: 'id',
@ -17,15 +16,25 @@ const columns = [{
text: 'Product Price'
}];
const expandRow = {
showExpandColumn: true,
renderer: row => (
<div>
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
<p>You can render anything here, also you can add additional data on every row object</p>
<p>expandRow.renderer callback will pass the origin row object to you</p>
</div>
)
};
export default () => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click'
}) }
selectRow={ { mode: 'checkbox', clickToSelect: true } }
expandRow={ expandRow }
/>
</div>
);