mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-29 05:30:05 +00:00
Compare commits
1 Commits
react-boot
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3d2a4fafc4 |
@@ -1,6 +1,6 @@
|
||||
|
||||
# Row selection
|
||||
`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
|
||||
`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
|
||||
|
||||
## Required
|
||||
* [mode (**required**)](#mode)
|
||||
@@ -11,8 +11,6 @@
|
||||
* [classes)](#classes)
|
||||
* [bgColor](#bgColor)
|
||||
* [nonSelectable)](#nonSelectable)
|
||||
* [nonSelectableStyle](#nonSelectableStyle)
|
||||
* [nonSelectableClasses](#nonSelectableClasses)
|
||||
* [clickToSelect)](#clickToSelect)
|
||||
* [clickToExpand)](#clickToExpand)
|
||||
* [clickToEdit](#clickToEdit)
|
||||
@@ -141,54 +139,6 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
|
||||
This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
|
||||
and a callback function for more flexible customization.
|
||||
|
||||
### Style Object
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
nonSelectable: [1, 3 ,5],
|
||||
nonSelectableStyle: { backgroundColor: 'gray' }
|
||||
};
|
||||
```
|
||||
|
||||
### Callback Function
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
nonSelectable: [1, 3 ,5],
|
||||
nonSelectableStyle: (row, rowIndex) => { return ...; }
|
||||
};
|
||||
```
|
||||
|
||||
### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
|
||||
This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
|
||||
flexible customization
|
||||
|
||||
### String
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
nonSelectable: [1, 3 ,5],
|
||||
nonSelectableClasses: 'my-class'
|
||||
};
|
||||
```
|
||||
|
||||
### Callback Function
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
nonSelectable: [1, 3 ,5],
|
||||
nonSelectableClasses: (row, rowIndex) => { return ...; }
|
||||
};
|
||||
```
|
||||
|
||||
### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
|
||||
Allow user to select row by clicking on the row.
|
||||
|
||||
@@ -199,7 +149,7 @@ const selectRow = {
|
||||
};
|
||||
```
|
||||
|
||||
> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
|
||||
> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
|
||||
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
|
||||
|
||||
### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
|
||||
@@ -357,7 +307,7 @@ const selectRow = {
|
||||
mode: 'checkbox',
|
||||
onSelectAll: (isSelect, rows, e) => {
|
||||
if (isSelect && SOME_CONDITION) {
|
||||
return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
|
||||
return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const products = productsGenerator();
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true,
|
||||
nonSelectable: [0, 2, 4],
|
||||
nonSelectableClasses: 'row-index-bigger-than-2101'
|
||||
};
|
||||
|
||||
const sourceCode = `\
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true,
|
||||
nonSelectable: [0, 2, 4],
|
||||
nonSelectableClasses: 'row-index-bigger-than-2101'
|
||||
};
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
`;
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
@@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const products = productsGenerator();
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true,
|
||||
nonSelectable: [0, 2, 4],
|
||||
nonSelectableStyle: { backgroundColor: 'gray' }
|
||||
};
|
||||
|
||||
const sourceCode = `\
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true,
|
||||
nonSelectable: [0, 2, 4],
|
||||
nonSelectableStyle: { backgroundColor: 'gray' }
|
||||
};
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
`;
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-bootstrap-table2-example",
|
||||
"version": "1.0.34",
|
||||
"version": "1.0.32",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
|
||||
@@ -152,8 +152,6 @@ import HeaderStyleTable from 'examples/row-selection/header-style';
|
||||
import HideSelectAllTable from 'examples/row-selection/hide-select-all';
|
||||
import CustomSelectionTable from 'examples/row-selection/custom-selection';
|
||||
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
|
||||
import NonSelectableRowsStyleTable from 'examples/row-selection/non-selectable-rows-style';
|
||||
import NonSelectableRowsClassTable from 'examples/row-selection/non-selectable-rows-class';
|
||||
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
|
||||
import SelectionHooks from 'examples/row-selection/selection-hooks';
|
||||
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
|
||||
@@ -412,8 +410,6 @@ storiesOf('Row Selection', module)
|
||||
.add('Custom Selection', () => <CustomSelectionTable />)
|
||||
.add('Selection Background Color', () => <SelectionBgColorTable />)
|
||||
.add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
|
||||
.add('Not Selectabled Rows Style', () => <NonSelectableRowsStyleTable />)
|
||||
.add('Not Selectabled Rows Class', () => <NonSelectableRowsClassTable />)
|
||||
.add('Selection Hooks', () => <SelectionHooks />)
|
||||
.add('Hide Selection Column', () => <HideSelectionColumnTable />)
|
||||
.add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-bootstrap-table2-filter",
|
||||
"version": "1.3.0",
|
||||
"version": "1.2.0",
|
||||
"description": "it's a column filter addon for react-bootstrap-table2",
|
||||
"main": "./lib/index.js",
|
||||
"repository": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-bootstrap-table-next",
|
||||
"version": "3.3.1",
|
||||
"version": "3.2.1",
|
||||
"description": "Next generation of react-bootstrap-table",
|
||||
"main": "./lib/index.js",
|
||||
"repository": {
|
||||
|
||||
@@ -182,8 +182,6 @@ BootstrapTable.propTypes = {
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
||||
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
nonSelectable: PropTypes.array,
|
||||
nonSelectableStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
nonSelectableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
hideSelectColumn: PropTypes.bool,
|
||||
selectionRenderer: PropTypes.func,
|
||||
|
||||
@@ -21,7 +21,6 @@ const Filters = (props) => {
|
||||
columns.forEach((column, i) => {
|
||||
filterColumns.push(<FiltersCell
|
||||
index={ i }
|
||||
key={ column.dataField }
|
||||
column={ column }
|
||||
currFilters={ currFilters }
|
||||
onExternalFilter={ onExternalFilter }
|
||||
|
||||
@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
|
||||
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
|
||||
|
||||
return (
|
||||
<td className="expand-cell" onClick={ this.handleClick } { ...attrs }>
|
||||
<td onClick={ this.handleClick } { ...attrs }>
|
||||
{
|
||||
expandColumnRenderer ? expandColumnRenderer({
|
||||
expandable,
|
||||
|
||||
@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<th className="expand-cell-header" data-row-selection { ...attrs }>
|
||||
<th data-row-selection { ...attrs }>
|
||||
{
|
||||
expandHeaderColumnRenderer ?
|
||||
expandHeaderColumnRenderer({ isAnyExpands }) :
|
||||
|
||||
@@ -9,7 +9,6 @@ export default (Component) => {
|
||||
const key = props.value;
|
||||
const selected = _.contains(selectRow.selected, key);
|
||||
const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
|
||||
const notSelectable = _.contains(selectRow.nonSelectable, key);
|
||||
|
||||
let {
|
||||
style,
|
||||
@@ -39,22 +38,6 @@ export default (Component) => {
|
||||
}
|
||||
}
|
||||
|
||||
if (notSelectable) {
|
||||
const notSelectableStyle = _.isFunction(selectRow.nonSelectableStyle)
|
||||
? selectRow.nonSelectableStyle(props.row, props.rowIndex)
|
||||
: selectRow.nonSelectableStyle;
|
||||
|
||||
const notSelectableClasses = _.isFunction(selectRow.nonSelectableClasses)
|
||||
? selectRow.nonSelectableClasses(props.row, props.rowIndex)
|
||||
: selectRow.nonSelectableClasses;
|
||||
|
||||
style = {
|
||||
...style,
|
||||
...notSelectableStyle
|
||||
};
|
||||
className = cs(className, notSelectableClasses) || undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{ ...props }
|
||||
|
||||
@@ -86,7 +86,7 @@ export default class SelectionCell extends Component {
|
||||
<BootstrapContext.Consumer>
|
||||
{
|
||||
({ bootstrap4 }) => (
|
||||
<td className="selection-cell" onClick={ this.handleClick } { ...attrs }>
|
||||
<td onClick={ this.handleClick } { ...attrs }>
|
||||
{
|
||||
selectionRenderer ? selectionRenderer({
|
||||
mode: inputType,
|
||||
|
||||
@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<th className="selection-cell-header" data-row-selection { ...attrs }>{ content }</th>
|
||||
<th data-row-selection { ...attrs }>{ content }</th>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
exports[`<SelectionCell /> render should render component correctly 1`] = `
|
||||
<td
|
||||
className="selection-cell"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<input
|
||||
|
||||
@@ -4410,6 +4410,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1:
|
||||
is-extendable@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
|
||||
integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
|
||||
dependencies:
|
||||
is-plain-object "^2.0.4"
|
||||
|
||||
@@ -4635,6 +4636,7 @@ isobject@^2.0.0:
|
||||
isobject@^3.0.0, isobject@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
|
||||
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
|
||||
|
||||
isomorphic-fetch@^2.1.1:
|
||||
version "2.2.1"
|
||||
@@ -5672,8 +5674,9 @@ minimist@~0.0.1:
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
|
||||
|
||||
mixin-deep@^1.2.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.0.tgz#47a8732ba97799457c8c1eca28f95132d7e8150a"
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
|
||||
integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
|
||||
dependencies:
|
||||
for-in "^1.0.2"
|
||||
is-extendable "^1.0.1"
|
||||
|
||||
Reference in New Issue
Block a user