vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add story for caption table for bootstrap4

Browse Source
This commit is contained in:
AllenFang 2019-12-07 13:29:19 +08:00
parent ee829eb924
commit 76f4795400
2 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js vendored Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
<BootstrapTable bootstrap4 keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
`;
const Caption = () => <h3 style={ { borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' } }>Component as Header</h3>;
export default () => (
<div>
<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
<BootstrapTable bootstrap4 keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);

2
packages/react-bootstrap-table2-example/stories/index.js vendored
View File

@ -18,6 +18,7 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
// bootstrap 4
import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
import Bootstrap4CaptionTable from 'examples/bootstrap4/caption-table';
import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
@ -268,6 +269,7 @@ storiesOf('Basic Table', module)
storiesOf('Bootstrap 4', module)
.addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
.add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
.add('Table Caption bootstrap 4', () => <Bootstrap4CaptionTable />)
.add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
.add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
.add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)