mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
refine large table example
This commit is contained in:
parent
185c184f01
commit
dd54294382
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user