diff --git a/docs/column-props.md b/docs/column-props.md index 5857c0f..5da8c34 100644 --- a/docs/column-props.md +++ b/docs/column-props.md @@ -123,7 +123,7 @@ Enable the column sort via a `true` value given. ``` ## column.classes - [String | Function] -It's availabe to have custom class on table column: +It's available to have custom class on table column: ```js { @@ -151,7 +151,7 @@ In addition, `classes` also accept a callback function which have more power to A new `String` will be the result as element class. ## column.headerClasses - [String | Function] -It's similar to [`column.classes`](#columnclasses-string-function), `headerClasses` is availabe to have customized class on table header column: +It's similar to [`column.classes`](#columnclasses-string-function), `headerClasses` is available to have customized class on table header column: ```js { @@ -176,7 +176,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S A new `String` will be the result of element headerClasses. ## column.style - [Object | Function] -It's availabe to have custom style on table column: +It's available to have custom style on table column: ```js { @@ -206,7 +206,7 @@ A new `Object` will be the result of element style. ## column.headerStyle - [Object | Function] -It's availabe to have customized inline-style on table header column: +It's available to have customized inline-style on table header column: ```js { @@ -264,7 +264,7 @@ A new `String` will be the result of element title. } ``` -It's also availabe to custom via a callback function: +It's also available to custom via a callback function: ```js { headerTitle: function callback(column, colIndex) { ... } @@ -386,7 +386,7 @@ Not only `Object`, `callback function` is also acceptable. It takes **4** argume A new `Object` will be the result of element HTML attributes. > Caution: -> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited: +> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten: ```js { @@ -397,7 +397,7 @@ A new `Object` will be the result of element HTML attributes. ``` ## column.headerAttrs - [Object | Function] -`headerAttrs` is similiar to [`column.attrs`](#columnattrs-object-function) but it works for header column. +`headerAttrs` is similar to [`column.attrs`](#columnattrs-object-function) but it works for header column. ```js { // omit... @@ -487,7 +487,7 @@ If a callback function given, you can control the editable level as cell level: } ``` -The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead: +The return value can be a bool or an object. If your validation is pass, return `true` explicitly. If your validation is invalid, return following object instead: ```js { valid: false, @@ -558,7 +558,7 @@ import { textFilter } from 'react-bootstrap-table2-filter'; For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial. ## column.filterValue - [Function] -Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filterd: +Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filtered: **Parameters** * `cell`: The value of current cell. diff --git a/docs/migration.md b/docs/migration.md index aaaf1d8..86735c1 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -7,8 +7,8 @@ sidebar_label: Migration ## Migration Guide * Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop. -* Please see the [Roadmap](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1. -* Feel free to see the [offical docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!! +* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1. +* Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!! ## Preface @@ -29,11 +29,11 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay) * Overlay/Loading Addons -This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernal module(SRP). Hence, which means you probably need to install above addons when you need specific features. +This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features. ## Core Table Migration -There is a big chagne is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`: +There is a big change is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`: ```js import BootstrapTable from 'react-bootstrap-table-next'; @@ -54,8 +54,8 @@ const columns = [{ The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](./column-props.html#columnheaderformatter-function). -* [`BootstrapTable` Definitation](./table-props.html) -* [Column Definitation](./column-props.html) +* [`BootstrapTable` Definition](./table-props.html) +* [Column Definition](./column-props.html) ## Table Sort @@ -71,7 +71,7 @@ Please see [Work with table sort](./basic-sort.html). - [ ] Sort management - [ ] Multi sort -Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./column-props.html#columnsort-bool) property on column definitation. +Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./column-props.html#columnsort-bool) property on column definition. ## Row Selection diff --git a/docs/row-select-props.md b/docs/row-select-props.md index 860a44e..bf743f7 100644 --- a/docs/row-select-props.md +++ b/docs/row-select-props.md @@ -103,7 +103,7 @@ const selectRow = { ``` ## selectRow.bgColor - [String | Function] -A quick way to specify the backgroud color when row is selected +A quick way to specify the background color when row is selected ```js const selectRow = { diff --git a/docs/table-props.md b/docs/table-props.md index 720eb75..4a9d56a 100644 --- a/docs/table-props.md +++ b/docs/table-props.md @@ -17,6 +17,8 @@ title: BootstrapTable Props * [bordered](#bordered-bool) * [hover](#hover-bool) * [condensed](#condensed-bool) +* [id](#id-string) +* [classes](#classes-string) * [cellEdit](#celledit-object) * [selectRow](#selectrow-object) * [rowStyle](#rowstyle-object-function) @@ -63,7 +65,7 @@ A special case for remote pagination: remote={ { pagination: true, filter: false, sort: false } } ``` -There'r a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas. +There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data. ## noDataIndication - [Function] `noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**. @@ -73,7 +75,7 @@ Telling if table is loading or not, for example: waiting data loading, filtering When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay-function) prop, if [`overlay`](#overlay-function) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering. ## overlay - [Function] -`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you: +`overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you: ```sh $ npm install react-bootstrap-table2-overlay @@ -107,6 +109,10 @@ Same as bootstrap `.table-hover` class for adding mouse hover effect (grey backg ## condensed - [Bool] Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half. +## id - [String] +Customize id on `table` element. +## classes - [String] +Customize class on `table` element. ## cellEdit - [Object] Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail. @@ -170,7 +176,7 @@ const defaultSorted = [{ ``` ## pagination - [Object] -`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly. +`pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally. ```sh $ npm install react-bootstrap-table2-paginator --save @@ -212,7 +218,7 @@ paginationFactory({ prePageTitle: 'Go to previous', // the title of previous page button firstPageTitle: 'Go to first', // the title of first page button lastPageTitle: 'Go to last', // the title of last page button - hideSizePerPage: true, // hide the size per page dorpdown + hideSizePerPage: true, // hide the size per page dropdown hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false onPageChange: (page, sizePerPage) => {}, // callback function when page was changing onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing @@ -220,7 +226,7 @@ paginationFactory({ ``` ## filter - [Object] -`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly. +`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. ```sh $ npm install react-bootstrap-table2-filter --save