From 507e5544deee67ea14223d2d675bae9117c8c8b3 Mon Sep 17 00:00:00 2001 From: Allen Date: Sun, 27 Aug 2017 10:55:38 -0500 Subject: [PATCH] fix #11 * create document * CONTRIBUTING * refine contributing docs * patch for some propTypes definition missing --- CONTRIBUTING.md | 26 +-- docs/README.md | 21 +++ docs/columns.md | 161 ++++++++++++++++++ docs/development.md | 28 +++ .../src/bootstrap-table.js | 5 +- 5 files changed, 229 insertions(+), 12 deletions(-) create mode 100644 docs/README.md create mode 100644 docs/columns.md create mode 100644 docs/development.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 59a3a96..eab673b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,17 +1,21 @@ -# Contributing to react-bootstrap-table2 +# Issues +Before open issue, please make sure your problem/request is open or not. When open issue, please give following information if you can: +* Example code or repo(Please keep it simple and minimal) +* Reproduce steps +* `react-bootstrap-table2` version -## Commands +Anyway, it's welcome to open issue to ask questions or feature request. -### Testing -In order to run the tests +# Pull Requests +Check [here](./docs/development.md) for getting start development. -`yarn test` +* When you want to implement a new feature, please let us know(via issues). +* Please run test before opening PR and also remember to write test code. +* If you PR is trying to fix bug, please describe the bug when PR open. -testing with `watch mode` +# For the member of react-bootstrap-table2 org -`yarn test:watch` - -see the coverage report - -`yarn test:coverage` +* Please convert ticket to issue when ticket move to `Ready` from `Backlog` in project +* Please write document if any new API/feature/props changed or added +* Please add story example if any new feature implement \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..fd43f93 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,21 @@ +# Documents + +## Props on BootstrapTable + +### keyField(**required**) - [String] +`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key. + +### data(**required**) - [Array] +Assign your table data via `data` prop. It only accept an Array object. + +### columns(**required**) - [Object] +`columns` props accept an Array object, please see [columns definition](./columns.md) for more detail. + +### striped - [Bool] +Same as `.table-striped` class for adding zebra-stripes to a table +### bordered - [Bool] +Same as `.table-bordered` class for adding borders on all sides of the table and cells +### hover - [Bool] +Same as `.table-hover` class for adding a hover effect (grey background color) on table rows +### condensed - [Bool] +Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half \ No newline at end of file diff --git a/docs/columns.md b/docs/columns.md new file mode 100644 index 0000000..1a28af7 --- /dev/null +++ b/docs/columns.md @@ -0,0 +1,161 @@ +# Definition of columns props on BootstrapTable + +Available properties in a column object: + +* [dataField (**required**)](#dataField) +* [text (**required**)](#text) +* [formatter](#formatter) +* [headerFormatter](#headerFormatter) +* [formatExtraData](#formatExtraData) +* [classes](#classes) +* [style](#style) +* [title](#title) +* [events](#events) +* [align](#align) +* [headerTitle](#headerTitle) +* [headerEvents](#headerEvents) +* [headerAlign](#headerAlign) + +Following is a most simplest and basic usage: + +```js +const rows = [ { id: 1, name: '...', price: '102' } ]; +const columns = [ { + dataField: id, + text: Production ID + }, { + dataField: name, + text: Production Name + }, { + dataField: price, + text: Production Price + } +]; +``` + +Let's introduce the definition of column object + +## column.dataField (**required**) - [String] +Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example: + +```js +const row = { + id: 'A001', + address: { + postal: '1234-12335', + city: 'Chicago' + } +} +``` +You can use `dataField` with dot(`.`) to describe nested object: + +```js +dataField: 'address.postal' +dataField: 'address.city' +``` + +## column.text (**required**) - [String] +`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter) + +## column.formatter - [Function] +`formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return. + +* `cell` +* `row` +* `rowIndex` +* [`formatExtraData`](#formatExtraData) + +## column.headerFormatter - [Function] +`headerFormatter` allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return. + +* `column`: column object itself +* `colIndex` + +## column.formatExtraData - [Any] +It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function. + +## column.classes - [String | Function] +It's availabe to have custom class on table column: + +```js +{ + // omit... + classes: 'id-custom-cell' +} +``` +In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take three arguments and a string is expect to return: + +* `cell` +* `row` +* `colIndex` + +## column.style - [Object | Function] +It's availabe to have custom class on table column: + +```js +{ + // omit... + style: { backgroundColor: 'green' } +} +``` +`style` like [`column.classes`](#classes), it accept a callback function too and have same arguments: `cell`, `row` and `colIndex`. + +## column.title - [Bool | Function] +`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column. In addition, you can custom the title via a callback function: + +```js +{ + // omit... + title: (cell, row, colIndex) => { + // return custom title here + } +} +``` + +## column.headerTitle - [Bool | Function] +`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), it's also availabe to custom via a callback function: + +```js +{ + // omit... + headerTitle: (column, colIndex) => { + // column is an object and perform itself + // return custom title here + } +} +``` + +## column.align - [String | Function] +You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. However, `align` also accept a callback function for customizable reason and this function take fore arguments: + +* `cell` +* `row` +* `colIndex` + +## column.headerAlign - [String | Function] +It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column. Also, you can custom the align by a callback function: + +```js +{ + // omit... + headerAlign: (column, colIndex) => { + // column is an object and perform itself + // return custom title here + } +} +``` + +## column.events - [Object] +You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property: + +```js +{ + // omit... + events: { + onClick: e => { ... } + } +} +``` + +## column.headerEvents - [Object] +`headerEvents` same as [`column.events`](#events) but this is for header column. \ No newline at end of file diff --git a/docs/development.md b/docs/development.md new file mode 100644 index 0000000..bf91e47 --- /dev/null +++ b/docs/development.md @@ -0,0 +1,28 @@ +## Development Guide + +### Setup +```bash +$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git +$ cd react-bootstrap-table +$ npm install +$ lerna bootstrap # ./node_modules/.bin/lerna bootstrap +``` +### Development +```bash +$ npm start +``` + +### Launch StoryBook +We use [storybook](https://storybook.js.org/) to list our examples and it also have hot reload from source code. Sometime, it is also a good entry point to develop. + +```bash +$ cd packages/react-bootstrap-table2-example +$ npm run storybook +``` + +### Testing +```bash +$ npm test +$ npm run test:watch # for watch mode +$ npm run test:coverage # generate coverage report +``` \ No newline at end of file diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 36c8f00..4cbb69d 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -48,7 +48,10 @@ BootstrapTable.propTypes = { keyField: PropTypes.string.isRequired, data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, - striped: PropTypes.bool + striped: PropTypes.bool, + bordered: PropTypes.bool, + hover: PropTypes.bool, + condensed: PropTypes.bool }; BootstrapTable.defaultProps = {