From 5a69f3a5b5423c788535e91fbf2f8e65126279f6 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Wed, 4 Apr 2018 19:54:32 +0800 Subject: [PATCH 1/9] basic introduction for filters --- docs/filter-props.md | 50 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index d38666f..6861419 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -2,5 +2,53 @@ id: filter-props title: Column Filter Props --- +`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). + +## Content Table + +* [How to use](#how-to-use) +* [FilterFactory Props](#filterfactory-props) +* [Filters](#filters-props) + * [textFilter](#1-textfilter) + * [numberFilter](#2-numberFilter) + * [selectFilter](#3-selectFilter) +* [Comparator](#comparator) + +## How to use +You should apply following **2** to enable `filter` functionality for `react-bootstrap-table2`. +* `filterFactory` +* `filters` (**3** types support) + * textFilter + * numberFilter + * selectFilter + +```js +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price', + filter: numberFilter() +}]; + + +``` + +## FilterFactory Props +**No Any Available Props Yet** + +## Filters Props + +### Required +**NONE** + +### Optional + -**No Any Available Props Yet** \ No newline at end of file From d0dec1374471d50a26eb8520ec6ab7564d97e505 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Wed, 4 Apr 2018 19:54:54 +0800 Subject: [PATCH 2/9] details for props of text filter --- docs/filter-props.md | 67 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 62 insertions(+), 5 deletions(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index 6861419..57bedc4 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -41,14 +41,71 @@ const columns = [{ ``` -## FilterFactory Props +## Props of FilterFactory **No Any Available Props Yet** -## Filters Props +## Props of Filters -### Required -**NONE** +## (1). textFilter -### Optional +**Required**: NONE +**Optional**: +### textFilter.placeholder - [String] +* custom the input placeholder +### textFilter.className - [String] +* custom class name on input + +### textFilter.defaultValue - [String] +* default filtering value + +### textFilter.comparator - [Comparator] +* What kind of comparator to compare. Default is Comparator.LIKE + +### textFilter.caseSensitive - [Boolean] +* default is `false`, and `true` will only work when comparator is `LIKE`. + +### textFilter.style - [Object] +* your custom inline styles on `input` + +### textFilter.delay - [Number] +* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`. +### textFilter.getFilter - [Function] +* export `filter` function to allow users to access. For textFilter, `filter(value)` to filter columns dynamically. + +**Examples** +```js +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +const columns = [{ + dataField: 'id', + text: 'Product ID', +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter({ + placeholder: 'My Custom PlaceHolder', // custom the input placeholder + className: 'my-custom-text-filter', // custom classname on input + defaultValue: 'test', // default filtering value + comparator: Comparator.EQ, // default is Comparator.LIKE + caseSensitive: true, // default is false, and true will only work when comparator is LIKE + style: { backgroundColor: 'yellow' }, // your custom inline styles on input + delay: 1000, // how long will trigger filtering after user typing, default is 500 ms + onClick: e => console.log(e), + getFilter: (filter) => { // nameFilter was assigned once the component has been mounted. + nameFilter = filter; + } + }) +}, { + dataField: 'price', + text: 'Product Price', + filter: textFilter() +}]; + + +``` + +### (2). numberFilter +### (3). selectFilter From 43444471e235049ecf11d03b6b6cc00bd5b291c2 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 15:05:36 +0800 Subject: [PATCH 3/9] details for props of select filter --- docs/filter-props.md | 74 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 65 insertions(+), 9 deletions(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index 57bedc4..1d92f66 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -2,7 +2,7 @@ id: filter-props title: Column Filter Props --- -`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). +`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). For more information, please take refer to the samples as [link](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) here. ## Content Table @@ -10,8 +10,8 @@ title: Column Filter Props * [FilterFactory Props](#filterfactory-props) * [Filters](#filters-props) * [textFilter](#1-textfilter) - * [numberFilter](#2-numberFilter) - * [selectFilter](#3-selectFilter) + * [selectFilter](#2-selectFilter) + * [numberFilter](#3-numberFilter) * [Comparator](#comparator) ## How to use @@ -19,12 +19,12 @@ You should apply following **2** to enable `filter` functionality for `react-boo * `filterFactory` * `filters` (**3** types support) * textFilter - * numberFilter * selectFilter + * numberFilter ```js import BootstrapTable from 'react-bootstrap-table-next'; -import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; const columns = [{ dataField: 'id', @@ -35,7 +35,7 @@ const columns = [{ }, { dataField: 'price', text: 'Product Price', - filter: numberFilter() + filter: textFilter() }]; @@ -74,7 +74,7 @@ const columns = [{ ### textFilter.getFilter - [Function] * export `filter` function to allow users to access. For textFilter, `filter(value)` to filter columns dynamically. -**Examples** +**Example** ```js import BootstrapTable from 'react-bootstrap-table-next'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; @@ -107,5 +107,61 @@ const columns = [{ ``` -### (2). numberFilter -### (3). selectFilter +## (2). selectFilter +**Required**: + +### selectFilter.options - [Object] +* (Required) the options for the list of drop down. + +**Optional**: + +### selectFilter.className - [String] +* custom class name on input + +### selectFilter.withoutEmptyOption - [Boolean] +* When it was set to `true`, the drop down list would hide the default selection. +### selectFilter.defaultValue - [String] +* default filtering value + +### selectFilter.comparator - [Comparator] +* What kind of comparator to compare. Default is `Comparator.EQ` + +### selectFilter.style - [Object] +* your custom inline styles on `input` + +### selectFilter.getFilter - [Function] +* export `filter` function to allow users to access. For selectFilter, `filter(value)` to filter columns dynamically. + +**Example** +```js +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter'; + +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; + +const columns = [ + { ... }, { ... }, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: selectFilter({ + options: selectOptions, + className: 'test-classname', + withoutEmptyOption: true, + defaultValue: 2, + comparator: Comparator.LIKE, // default is Comparator.EQ + style: { backgroundColor: 'pink' }, + getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted. + qualityFilter = filter; + } + }) +}]; + + +``` + +## (3). numberFilter From 7a9057416b43ae7b5b794933c77c4a7d34d8f6bb Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 15:36:01 +0800 Subject: [PATCH 4/9] details for props of number filter --- docs/filter-props.md | 82 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 80 insertions(+), 2 deletions(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index 1d92f66..6196e2d 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -61,7 +61,7 @@ const columns = [{ * default filtering value ### textFilter.comparator - [Comparator] -* What kind of comparator to compare. Default is Comparator.LIKE +* Specify what kind of comparator to compare. Default is Comparator.LIKE ### textFilter.caseSensitive - [Boolean] * default is `false`, and `true` will only work when comparator is `LIKE`. @@ -124,7 +124,7 @@ const columns = [{ * default filtering value ### selectFilter.comparator - [Comparator] -* What kind of comparator to compare. Default is `Comparator.EQ` +* Specify what kind of comparator to compare. Default is `Comparator.EQ` ### selectFilter.style - [Object] * your custom inline styles on `input` @@ -165,3 +165,81 @@ const columns = [ ``` ## (3). numberFilter +**Required**: NONE + +**Optional**: + +### numberFilter.options - [Array] +* Once the `options` has been defined, it will render number `select` drop down instead of number input field. + +### numberFilter.delay - [Number] +* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`. + +### numberFilter.placeholder - [String] +* customized placeholder for number input. + +### numberFilter.withoutEmptyComparatorOption - [Boolean] +* When it was set to `true`, the drop down list of `comparator` would hide the default selection. + +### numberFilter.withoutEmptyNumberOption - [Boolean] +* When it was set to `true`, the drop down list of `number` would hide the default selection. Besides, before picking up this prop, please make sure that you've defined the `props.options` correctly. + +### numberFilter.defaultValue - [Object] +* It is the default filtering value. Furthermore, it accepts **2** attributes: + * number: filter value + * comparator: what kind of comparator to compare + +### numberFilter.comparator - [[Comparator]] +* Specify what kind of comparator to compare. Default is to list `all` of comparators. + +### numberFilter.className - [String] +* custom class name on the `wrapper` of number input and comparator drop down. + +### numberFilter.comparatorClassName - [String] +* custom class name on the `comparator` drop down. + +### numberFilter.numberClassName - [String] +* custom class name on the number `input`. + +### numberFilter.style - [Object] +* custom inline styles on the `wrapper` of number input and comparator drop down. + +### numberFilter.comparatorStyle - [Object] +* custom inline styles on the `comparator` drop down. + +### numberFilter.numberStyle - [Object] +* custom inline styles on the number `input`. + +### numberFilter.getFilter - [Function] +* export `filter` function to allow users to access. For numberFilter,
`filter({ number, comparator })` to filter columns dynamically. + +**Example**: +```js +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter'; + +const columns = [{ ... }, { ... }, { + dataField: 'price', + text: 'Product Price', + filter: numberFilter({ + options: [2100, 2103, 2105], // if options defined, will render number select instead of number input + delay: 600, // how long will trigger filtering after user typing, default is 500 ms + placeholder: 'custom placeholder', // placeholder for number input + withoutEmptyComparatorOption: true, // dont render empty option for comparator + withoutEmptyNumberOption: true, // dont render empty option for number select if it is defined + comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], // Custom the comparators + style: { display: 'inline-grid' }, // custom the style on number filter + className: 'custom-numberfilter-class', // custom the class on number filter + comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select + comparatorClassName: 'custom-comparator-class', // custom the class on comparator select + numberStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on number input/select + numberClassName: 'custom-number-class', // custom the class on ber input/select + defaultValue: { number: 2103, comparator: Comparator.GT }, // default value + getFilter: (filter) => { // priceFilter was assigned once the component has been mounted. + priceFilter = filter; + } + }) +}]; + + +``` From 7b4bb40e872d20a1e8bc622b94f7040a9ff57032 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 15:46:04 +0800 Subject: [PATCH 5/9] details for comparator --- docs/filter-props.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/filter-props.md b/docs/filter-props.md index 6196e2d..fdcee94 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -243,3 +243,16 @@ const columns = [{ ... }, { ... }, { ``` + +## Comparator +We support the following ways to do the comparison. Each `filter` has its default comparator. For more information, please take refer to the introduction of props above. + +| | Comparator | Symbol | description | +|---|-----------------|--------|-------------------------| +| 1 | Comparator.LIKE | N/A | To include filter value | +| 2 | Comparator.EQ | = | | +| 3 | Comparator.NE | != | | +| 4 | Comparator.GT | > | | +| 5 | Comparator.GE | >= | | +| 6 | Comparator.LT | < | | +| 7 | Comparator.LE | <= | | From bc910edee414d1e0968681f336d338bf971ecbd4 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 15:54:06 +0800 Subject: [PATCH 6/9] simplify the introduction of column.filter in table-props. * re-position and description in more details in filter-props --- docs/table-props.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/table-props.md b/docs/table-props.md index 72cd9a0..eb26e59 100644 --- a/docs/table-props.md +++ b/docs/table-props.md @@ -230,30 +230,33 @@ paginationFactory({ ``` ## filter - [Object] -`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly. +`filter` allows users to filter data by columns. For more information, please navigate to [filter-props](./filter-props.html). +**Getting Started** ```sh $ npm install react-bootstrap-table2-filter --save ``` After installation of `react-bootstrap-table2-filter`, you can configure filter on table easily: +**Example** ```js +import BootstrapTable from 'react-bootstrap-table-next'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -// omit... -const columns = [ { - dataField: 'id', - text: 'Production ID' +const columns = [{ + dataField: 'id', + text: 'Product ID' }, { dataField: 'name', - text: 'Production Name', - filter: textFilter() // apply text filter + text: 'Product Name' }, { dataField: 'price', - text: 'Production Price' -} ]; - + text: 'Product Price', + filter: textFilter() // apply text filter +}]; + + ``` ## onTableChange - [Function] From 0e833f580e0e2e1a868307e983d81fee1f85b3ae Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 15:59:24 +0800 Subject: [PATCH 7/9] fix the typo and update the sidebar --- docs/basic-sort.md | 4 ++-- docs/migration.md | 2 +- website/i18n/en.json | 12 ++++++------ website/sidebars.json | 12 ++++++------ 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/basic-sort.md b/docs/basic-sort.md index 7ecbab0..d925d62 100644 --- a/docs/basic-sort.md +++ b/docs/basic-sort.md @@ -11,7 +11,7 @@ sidebar_label: Table Sort ----- ## Enable Sort on Column -Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definitation. +Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definition. ```js const columns = [{ @@ -57,7 +57,7 @@ Defined [`onSort`](./column-props.html#columnonsort-function) on target column: ## Custom the Sorting Algorithm -It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definitation. +It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definition. ```js { diff --git a/docs/migration.md b/docs/migration.md index 86735c1..e069bec 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -99,7 +99,7 @@ Please see [available filter configuration](./filter-props.html). Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly. -Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](./column-props.html#columnfilter-object) property on column definitation and [`filter`](./table-props.html#filter-object) prop on `BootstrapTable`. +Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](./column-props.html#columnfilter-object) property on column definition and [`filter`](./table-props.html#filter-object) prop on `BootstrapTable`. ## Cell Edit diff --git a/website/i18n/en.json b/website/i18n/en.json index 6900609..f37c450 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -40,12 +40,12 @@ "Blog": "Blog", "Basic Usage": "Basic Usage", "Remote Table": "Remote Table", - "Table Definitation": "Table Definitation", - "Column Definitation": "Column Definitation", - "Cell Editing Definitation": "Cell Editing Definitation", - "Pagination Definitation": "Pagination Definitation", - "Row Select Definitation": "Row Select Definitation", - "Column Filter Definitation": "Column Filter Definitation" + "Table Definition": "Table Definition", + "Column Definition": "Column Definition", + "Cell Editing Definition": "Cell Editing Definition", + "Pagination Definition": "Pagination Definition", + "Row Select Definition": "Row Select Definition", + "Column Filter Definition": "Column Filter Definition" }, "pages-strings": { "Help Translate|recruit community translators for your project": "Help Translate", diff --git a/website/sidebars.json b/website/sidebars.json index b911a87..92a3665 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -20,22 +20,22 @@ ] }, "api": { - "Table Definitation": [ + "Table Definition": [ "table-props" ], - "Column Definitation": [ + "Column Definition": [ "column-props" ], - "Cell Editing Definitation": [ + "Cell Editing Definition": [ "cell-edit-props" ], - "Pagination Definitation": [ + "Pagination Definition": [ "pagination-props" ], - "Row Select Definitation": [ + "Row Select Definition": [ "row-select-props" ], - "Column Filter Definitation": [ + "Column Filter Definition": [ "filter-props" ] } From ba88b7192fa9d6979b5d7146e49429db6658bab4 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Thu, 5 Apr 2018 16:22:44 +0800 Subject: [PATCH 8/9] refine the description of filter --- docs/filter-props.md | 11 +++++++++-- docs/table-props.md | 4 ++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index fdcee94..f160c9d 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -6,14 +6,21 @@ title: Column Filter Props ## Content Table +* [Getting Started](#getting-started) * [How to use](#how-to-use) -* [FilterFactory Props](#filterfactory-props) -* [Filters](#filters-props) +* [Props of FilterFactory](#props-of-filterfactory) +* [Props of Filters](#props-of-filters) * [textFilter](#1-textfilter) * [selectFilter](#2-selectFilter) * [numberFilter](#3-numberFilter) * [Comparator](#comparator) +## Getting Started +``` +$ npm install react-bootstrap-table2-filter --save +``` +After installing `react-bootstrap-table2-filter`, you can configure `filter` on table as following instruction. + ## How to use You should apply following **2** to enable `filter` functionality for `react-bootstrap-table2`. * `filterFactory` diff --git a/docs/table-props.md b/docs/table-props.md index eb26e59..5fe1ec6 100644 --- a/docs/table-props.md +++ b/docs/table-props.md @@ -233,11 +233,11 @@ paginationFactory({ `filter` allows users to filter data by columns. For more information, please navigate to [filter-props](./filter-props.html). **Getting Started** -```sh +``` $ npm install react-bootstrap-table2-filter --save ``` -After installation of `react-bootstrap-table2-filter`, you can configure filter on table easily: +After installing `react-bootstrap-table2-filter`, you could easily enable the functionality of `filter`. **Example** ```js From 35f95036204b5685dc66949ea1f974f3cb74acc6 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 8 Apr 2018 00:57:23 +0800 Subject: [PATCH 9/9] emphasize the title and remove unnecessary order number --- docs/filter-props.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/filter-props.md b/docs/filter-props.md index f160c9d..b9e358e 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -4,24 +4,24 @@ title: Column Filter Props --- `react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). For more information, please take refer to the samples as [link](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) here. -## Content Table +## **Content Table** * [Getting Started](#getting-started) * [How to use](#how-to-use) * [Props of FilterFactory](#props-of-filterfactory) * [Props of Filters](#props-of-filters) - * [textFilter](#1-textfilter) - * [selectFilter](#2-selectFilter) - * [numberFilter](#3-numberFilter) + * [textFilter](#textfilter) + * [selectFilter](#selectFilter) + * [numberFilter](#numberFilter) * [Comparator](#comparator) -## Getting Started +## **Getting Started** ``` $ npm install react-bootstrap-table2-filter --save ``` After installing `react-bootstrap-table2-filter`, you can configure `filter` on table as following instruction. -## How to use +## **How to use** You should apply following **2** to enable `filter` functionality for `react-bootstrap-table2`. * `filterFactory` * `filters` (**3** types support) @@ -48,12 +48,12 @@ const columns = [{ ``` -## Props of FilterFactory +## **Props of FilterFactory** **No Any Available Props Yet** -## Props of Filters +## **Props of Filters** -## (1). textFilter +## textFilter **Required**: NONE @@ -114,7 +114,7 @@ const columns = [{ ``` -## (2). selectFilter +## selectFilter **Required**: ### selectFilter.options - [Object] @@ -171,7 +171,7 @@ const columns = [ ``` -## (3). numberFilter +## numberFilter **Required**: NONE **Optional**: @@ -251,7 +251,7 @@ const columns = [{ ... }, { ... }, { ``` -## Comparator +## **Comparator** We support the following ways to do the comparison. Each `filter` has its default comparator. For more information, please take refer to the introduction of props above. | | Comparator | Symbol | description |