mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
79fb2523d4
* allow user to customize attrs for column cell * [test] add test for customized cell attrs * allow user to customize attrs for header column cell * [test] add test for customized header cell attrs * update document * add new utils isObject and isEmptyObject * make cell attrs lowest priority * if style, event, classes, hidden, style was not given, display the * HTML attributes if it's legal. However, if the attributes mentioned * above was defined at the same time, column.attrs has lowest priority * and it will be overwrited. * [test] unit test for column.attrs * [test] unit test for column.headerAttrs * update Document * rename story name * fix lint error
46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
/* eslint no-unused-vars: 0 */
|
|
import React from 'react';
|
|
|
|
import { BootstrapTableful } from 'react-bootstrap-table2';
|
|
import Code from 'components/common/code-block';
|
|
import { productsGenerator } from 'utils/common';
|
|
|
|
const products = productsGenerator();
|
|
|
|
const columns = [{
|
|
dataField: 'id',
|
|
text: 'Product ID',
|
|
headerAttrs: { title: 'ID header column' }
|
|
}, {
|
|
dataField: 'name',
|
|
text: 'Product Name',
|
|
headerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
|
|
}, {
|
|
dataField: 'price',
|
|
text: 'Product Price'
|
|
}];
|
|
|
|
const sourceCode = `\
|
|
const columns = [{
|
|
dataField: 'id',
|
|
text: 'Product ID',
|
|
headerAttrs: { title: 'ID header column' }
|
|
}, {
|
|
dataField: 'name',
|
|
text: 'Product Name',
|
|
headerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
|
|
}, {
|
|
dataField: 'price',
|
|
text: 'Product Price'
|
|
}];
|
|
|
|
<BootstrapTableful keyField='id' data={ products } columns={ columns } />
|
|
`;
|
|
|
|
export default () => (
|
|
<div>
|
|
<BootstrapTableful keyField="id" data={ products } columns={ columns } />
|
|
<Code>{ sourceCode }</Code>
|
|
</div>
|
|
);
|