vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-12 12:00:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Development/sorted classes and style (#136)

Browse Source 
* 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
This commit is contained in:
chunming
2017-12-10 13:53:03 +08:00
committed by Allen
parent 574a3146fc
commit 00f1105c8d
11 changed files with 431 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/columns.md
+31
View File
@@ -25,6 +25,8 @@ Available properties in a column object:
* [headerEvents](#headerEvents)
* [headerAlign](#headerAlign)
* [headerAttrs](#headerAttrs)
* [headerSortingClasses](#headerSortingClasses)
* [headerSortingStyle](#headerSortingStyle)
* [editable](#editable)
* [validator](#validator)
* [editCellStyle](#editCellStyle)
@@ -419,6 +421,35 @@ A new `Object` will be the result of element headerAttrs.
> Same as [column.attrs](#attrs), it has lower priority and will be
> overwrited when other props related to HTML attributes were given.
### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
`headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
```js
const headerSortingClasses = 'demo-sorting';
```
Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return:
```js
const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... }
```
* `column`: The value of current column.
* `sortOrder`: The order of current sorting
* `isLastSorting`: Is the last one of sorted columns.
* `colIndex`: The index of the current column being processed in BootstrapTable.
### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
```js
const sortingHeaderStyle = {
backgroundColor: 'red'
};
```
## <a name='editable'>column.editable - [Bool | Function]</a>
`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.