Development/sorted classes and style #136

chunming-c · 2017-11-04T16:20:11Z

Hi @AllenFang, the PR aims to support sorted classes and style. Please take a look, thanks :)

support sorted classes and style.
typo fix

AllenFang · 2017-11-05T03:39:47Z

@Chun-MingChen I just wondering why you have following design:

sortedHeader: {
  classes: ....
  styles: ....
}

Our cell, row, selection and cell edit always separate classes and styles as two different prop

chunming-c · 2017-11-05T09:32:58Z

@AllenFang

Sure it does be inconsistent. I've fixed it to separate sortingClass and sorting style into two props. Thanks 👍

AllenFang · 2017-11-05T09:44:03Z

docs/README.md

+
+### <a name='sortingHeaderStyle'>sortingHeaderStyle - [Object | Function]</a>
+
+It's similiar to `sortingHeaderClasses`. It allows to customize style of `header cell` which is sorting based on. `Object` and `callback` function are acceptable. `callback` takes `2` arguments and an `Object` is expected to return:


An style object or callback function are acceptable

AllenFang · 2017-11-05T10:00:06Z

docs/README.md

+Furthermore, it also accepts a callback function which takes `2` arguments and `String` is expected to return:
+
+```js
+const sortingHeaderClasses = function callback(column, colIndex) { ... }


AllenFang · 2017-11-05T10:01:05Z

docs/README.md

+```
+
+* column: The value of current column.
+* colIndex: The index of the current column being processed in BootstrapTable.


Additional pass sort order to callback function as third argument

…ere defined

chunming-c · 2017-11-25T10:58:13Z

Hi @AllenFang:

Sorry for commit late. After our discussion, I implemented header sorting classes and style in column level. Furthermore, isLastSorting indicates that the field was last sorting or not. Please take a look, thanks :)

AllenFang

good job, but something need to change.

AllenFang · 2017-11-26T12:26:51Z

docs/columns.md


+### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
+
+`headerSortingClasses` allows to customize `class` for header cell which the table was sorting based on. 


headerSortingClasses allows to customize class for header cell when this column is sorting

AllenFang · 2017-11-26T12:30:33Z

docs/columns.md

+
+* `column`: The value of current column.
+* `sortOrder`: The order of current sorting
+* `isLastSorting`: Is the last one of sorting.


Is the last one of sorted columns.

AllenFang · 2017-11-26T12:31:58Z

docs/columns.md

+
+### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
+
+It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell which the table was sorting based on. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:


It allows to customize the style of header cell when this column is sorting

AllenFang · 2017-11-26T12:34:14Z

packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js

+  data={ products }
+  columns={ columns }
+  defaultSorted={ defaultSorted } 
+/>


AllenFang · 2017-11-26T12:36:07Z

packages/react-bootstrap-table2-example/stories/index.js

  .add('Default Sort Table', () => <DefaultSortTable />)
-  .add('Custom Sort Fuction', () => <CustomSortTable />);
+  .add('Custom Sort Fuction', () => <CustomSortTable />)
+  .add('Header sorting classes', () => <HeaderSortingClassesTable />)


Custom Classes on Sorting Header Column

AllenFang · 2017-11-26T12:36:18Z

packages/react-bootstrap-table2-example/stories/index.js

-  .add('Custom Sort Fuction', () => <CustomSortTable />);
+  .add('Custom Sort Fuction', () => <CustomSortTable />)
+  .add('Header sorting classes', () => <HeaderSortingClassesTable />)
+  .add('Header sorting style', () => <HeaderSortingStyleTable />);


Custom Style on Sorting Header Column

AllenFang · 2017-11-26T12:39:12Z

packages/react-bootstrap-table2/test/header-cell.test.js

        });
      });
+
+      describe('when headerSortingClasses was defined ', () => {


when headerSortingClasses is defined

AllenFang · 2017-11-26T12:39:34Z

packages/react-bootstrap-table2/test/header-cell.test.js

+              />);
+          });
+
+          it('should append classes correcly', () => {


should + V-ing

I thought that will be great for should + VR :)

AllenFang · 2017-11-26T12:40:45Z

packages/react-bootstrap-table2/test/header-cell.test.js

+          });
+        });
+
+        describe('if column.headerClasses was defined as well', () => {


if column.headerClasses is defined as well

AllenFang · 2017-11-26T12:40:59Z

packages/react-bootstrap-table2/test/header-cell.test.js

+        });
+      });
+
+      describe('when headerSortingStyle was defined', () => {


chunming-c added the development label Nov 4, 2017

chunming-c assigned AllenFang Nov 4, 2017

chunming-c force-pushed the development/sorted-classes-n-style branch 2 times, most recently from d9be2c2 to 7280e3c Compare November 5, 2017 09:27

AllenFang requested changes Nov 5, 2017

View reviewed changes

chunming-c added 13 commits November 17, 2017 23:41

fix missing defaultSorted props for default sort sample

ece15fe

implement customized classes for sorted header

8a932d7

[test] test for sorted header classes

fa43997

implement customized style for sorted header

97a62ed

[test] test for sorted header style

5de10c5

update document

6770b4f

add missing props check and fix typo

2419146

seperate sorting style and header into two props

115ca19

[test] add test case if column.headerStyle and column.headerClasses w…

e06bfbb

…ere defined

implement customized header style and classes in column level

c75f239

[test] test for customized header style and classes in column level

eab1a63

[DOC] document for customized classes and styles

61ca2e3

sample for customized classes and styles

af095c0

chunming-c force-pushed the development/sorted-classes-n-style branch from 7280e3c to af095c0 Compare November 25, 2017 10:38

chunming-c added 2 commits November 25, 2017 18:40

resolve conflict

269ffb3

typo fix for document

1014de2

chunming-c force-pushed the development/sorted-classes-n-style branch from f438426 to 1014de2 Compare November 25, 2017 10:50

AllenFang requested changes Nov 26, 2017

View reviewed changes

chunming-c added 2 commits December 9, 2017 17:51

resolve conflict

249f8a6

tuning the wording for test and documents

90cada4

chunming-c force-pushed the development/sorted-classes-n-style branch from 5092908 to 90cada4 Compare December 9, 2017 10:06

AllenFang approved these changes Dec 10, 2017

View reviewed changes

AllenFang merged commit 00f1105 into develop Dec 10, 2017

AllenFang deleted the development/sorted-classes-n-style branch December 10, 2017 05:53


		### <a name='sortingHeaderStyle'>sortingHeaderStyle - [Object \| Function]</a>

		It's similiar to `sortingHeaderClasses`. It allows to customize style of `header cell` which is sorting based on. `Object` and `callback` function are acceptable. `callback` takes `2` arguments and an `Object` is expected to return:


		### <a name='headerSortingClasses'>headerSortingClasses - [String \| Function]</a>

		`headerSortingClasses` allows to customize `class` for header cell which the table was sorting based on.


		### <a name='headerSortingStyle'>headerSortingStyle - [Object \| Function]</a>

		It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell which the table was sorting based on. A style `Object` and `callback` are acceptable. `callback` takes 4 arguments and an `Object` is expected to return:

Development/sorted classes and style #136

Development/sorted classes and style #136

Uh oh!

Conversation

chunming-c commented Nov 4, 2017

Uh oh!

AllenFang commented Nov 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chunming-c commented Nov 5, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunming-c commented Nov 25, 2017

Uh oh!

AllenFang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AllenFang commented Nov 5, 2017 •

edited

Loading