mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
00f1105c8d
* fix missing defaultSorted props for default sort sample * implement customized classes for sorted header * [test] test for sorted header classes * implement customized style for sorted header * [test] test for sorted header style * update document * add missing props check and fix typo * seperate sorting style and header into two props * [test] add test case if column.headerStyle and column.headerClasses were defined * implement customized header style and classes in column level * [test] test for customized header style and classes in column level * [DOC] document for customized classes and styles * sample for customized classes and styles * typo fix for document * tuning the wording for test and documents
55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
/* eslint no-unused-vars: 0 */
|
|
import React from 'react';
|
|
|
|
import BootstrapTable from 'react-bootstrap-table2';
|
|
import Code from 'components/common/code-block';
|
|
import { productsGenerator } from 'utils/common';
|
|
|
|
const products = productsGenerator();
|
|
|
|
const headerSortingStyle = { backgroundColor: '#c8e6c9' };
|
|
|
|
const columns = [{
|
|
dataField: 'id',
|
|
text: 'Product ID',
|
|
sort: true,
|
|
headerSortingStyle
|
|
}, {
|
|
dataField: 'name',
|
|
text: 'Product Name',
|
|
sort: true,
|
|
headerSortingStyle
|
|
}, {
|
|
dataField: 'price',
|
|
text: 'Product Price'
|
|
}];
|
|
|
|
|
|
const sourceCode = `\
|
|
const headerSortingStyle = { backgroundColor: '#c8e6c9' };
|
|
|
|
const columns = [{
|
|
dataField: 'id',
|
|
text: 'Product ID',
|
|
sort: true,
|
|
headerSortingStyle
|
|
}, {
|
|
dataField: 'name',
|
|
text: 'Product Name',
|
|
sort: true,
|
|
headerSortingStyle
|
|
}, {
|
|
dataField: 'price',
|
|
text: 'Product Price'
|
|
}];
|
|
|
|
<BootstrapTable keyField="id" data={ products } columns={ columns } />
|
|
`;
|
|
|
|
export default () => (
|
|
<div>
|
|
<BootstrapTable keyField="id" data={ products } columns={ columns } />
|
|
<Code>{ sourceCode }</Code>
|
|
</div>
|
|
);
|