mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-30 14:10:09 +00:00
Compare commits
13 Commits
dependabot
...
react-boot
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3d37a31103 | ||
|
|
f4f6649b91 | ||
|
|
8ecdbf611b | ||
|
|
4a340c714b | ||
|
|
4daa5ef4d7 | ||
|
|
acb9c9f61e | ||
|
|
6d13a86512 | ||
|
|
b5d536b8f4 | ||
|
|
e667317fbe | ||
|
|
d4ffc11f7e | ||
|
|
3c6aaacbce | ||
|
|
defcd04b52 | ||
|
|
5a44384e3c |
@@ -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,6 +11,8 @@
|
||||
* [classes)](#classes)
|
||||
* [bgColor](#bgColor)
|
||||
* [nonSelectable)](#nonSelectable)
|
||||
* [nonSelectableStyle](#nonSelectableStyle)
|
||||
* [nonSelectableClasses](#nonSelectableClasses)
|
||||
* [clickToSelect)](#clickToSelect)
|
||||
* [clickToExpand)](#clickToExpand)
|
||||
* [clickToEdit](#clickToEdit)
|
||||
@@ -139,6 +141,54 @@ 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.
|
||||
|
||||
@@ -149,7 +199,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>
|
||||
@@ -307,7 +357,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
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
"enzyme": "3.4.0",
|
||||
"enzyme-adapter-react-16.3": "1.0.0",
|
||||
"enzyme-to-json": "3.3.4",
|
||||
"eslint": "4.18.2",
|
||||
"eslint": "4.5.0",
|
||||
"eslint-config-airbnb": "15.1.0",
|
||||
"eslint-loader": "1.9.0",
|
||||
"eslint-plugin-import": "2.7.0",
|
||||
|
||||
@@ -71,6 +71,23 @@ const columns = [{
|
||||
/>
|
||||
`;
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true
|
||||
};
|
||||
|
||||
const expandRow = {
|
||||
renderer: row => (
|
||||
<div>
|
||||
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
|
||||
<p>You can render anything here, also you can add additional data on every row object</p>
|
||||
<p>expandRow.renderer callback will pass the origin row object to you</p>
|
||||
</div>
|
||||
),
|
||||
showExpandColumn: true,
|
||||
expandColumnPosition: 'right'
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
@@ -79,6 +96,8 @@ export default () => (
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="top"
|
||||
expandRow={ expandRow }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
<Code>{ sourceCode1 }</Code>
|
||||
<BootstrapTable
|
||||
@@ -87,6 +106,8 @@ export default () => (
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="bottom"
|
||||
expandRow={ expandRow }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
<Code>{ sourceCode2 }</Code>
|
||||
</div>
|
||||
|
||||
61
packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
vendored
Normal file
61
packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
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>
|
||||
);
|
||||
61
packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
vendored
Normal file
61
packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
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.32",
|
||||
"version": "1.0.35",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
|
||||
@@ -152,6 +152,8 @@ 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';
|
||||
@@ -410,6 +412,8 @@ 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.2.0",
|
||||
"version": "1.3.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.2.1",
|
||||
"version": "3.3.2",
|
||||
"description": "Next generation of react-bootstrap-table",
|
||||
"main": "./lib/index.js",
|
||||
"repository": {
|
||||
|
||||
@@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
|
||||
currFilters={ this.props.currFilters }
|
||||
filterPosition={ this.props.filterPosition }
|
||||
onExternalFilter={ this.props.onExternalFilter }
|
||||
selectRow={ selectRow }
|
||||
expandRow={ expandRow }
|
||||
/>
|
||||
)}
|
||||
<Body
|
||||
@@ -182,6 +184,8 @@ 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,
|
||||
|
||||
50
packages/react-bootstrap-table2/src/filters.js
vendored
50
packages/react-bootstrap-table2/src/filters.js
vendored
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import FiltersCell from './filters-cell';
|
||||
import Const from './const';
|
||||
import RowTemplate from './row/row-template';
|
||||
|
||||
const Filters = (props) => {
|
||||
const {
|
||||
@@ -12,27 +13,33 @@ const Filters = (props) => {
|
||||
currFilters,
|
||||
filterPosition,
|
||||
onExternalFilter,
|
||||
className
|
||||
className,
|
||||
selectRow,
|
||||
expandRow
|
||||
} = props;
|
||||
|
||||
const filterColumns = [];
|
||||
let showFiltersRow = false;
|
||||
function renderContent() {
|
||||
const filterColumns = [];
|
||||
let showFiltersRow = false;
|
||||
|
||||
columns.forEach((column, i) => {
|
||||
filterColumns.push(<FiltersCell
|
||||
index={ i }
|
||||
column={ column }
|
||||
currFilters={ currFilters }
|
||||
onExternalFilter={ onExternalFilter }
|
||||
onFilter={ onFilter }
|
||||
/>);
|
||||
columns.forEach((column, i) => {
|
||||
filterColumns.push(<FiltersCell
|
||||
index={ i }
|
||||
key={ column.dataField }
|
||||
column={ column }
|
||||
currFilters={ currFilters }
|
||||
onExternalFilter={ onExternalFilter }
|
||||
onFilter={ onFilter }
|
||||
/>);
|
||||
|
||||
if (column.filterRenderer || column.filter) {
|
||||
if (!showFiltersRow) {
|
||||
showFiltersRow = true;
|
||||
if (column.filterRenderer || column.filter) {
|
||||
if (!showFiltersRow) {
|
||||
showFiltersRow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return filterColumns;
|
||||
}
|
||||
|
||||
return (
|
||||
<tbody
|
||||
@@ -44,7 +51,12 @@ const Filters = (props) => {
|
||||
: 'table-footer-group'
|
||||
} }
|
||||
>
|
||||
<tr>{filterColumns}</tr>
|
||||
<RowTemplate
|
||||
renderContent={ renderContent }
|
||||
selectRow={ selectRow }
|
||||
expandRow={ expandRow }
|
||||
cellEl="td"
|
||||
/>
|
||||
</tbody>
|
||||
);
|
||||
};
|
||||
@@ -59,7 +71,9 @@ Filters.propTypes = {
|
||||
]),
|
||||
currFilters: PropTypes.object,
|
||||
onExternalFilter: PropTypes.func,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
selectRow: PropTypes.object,
|
||||
expandRow: PropTypes.object
|
||||
};
|
||||
|
||||
Filters.defaultProps = {
|
||||
|
||||
62
packages/react-bootstrap-table2/src/footer.js
vendored
62
packages/react-bootstrap-table2/src/footer.js
vendored
@@ -2,57 +2,41 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Const from './const';
|
||||
import RowTemplate from './row/row-template';
|
||||
import FooterCell from './footer-cell';
|
||||
import _ from './utils';
|
||||
|
||||
const Footer = (props) => {
|
||||
const { data, className, columns, selectRow, expandRow } = props;
|
||||
const SelectionFooterCellComp = () => <th />;
|
||||
const ExpansionFooterCellComp = () => <th />;
|
||||
|
||||
const isRenderFunctionColumnInLeft = (
|
||||
position = Const.INDICATOR_POSITION_LEFT
|
||||
) => position === Const.INDICATOR_POSITION_LEFT;
|
||||
function renderContent() {
|
||||
return columns.map((column, i) => {
|
||||
if (column.footer === undefined || column.footer === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const childrens = columns.map((column, i) => {
|
||||
if (column.footer === undefined || column.footer === null) {
|
||||
return false;
|
||||
}
|
||||
const columnData = _.pluck(data, column.dataField);
|
||||
|
||||
const columnData = _.pluck(data, column.dataField);
|
||||
|
||||
return (
|
||||
<FooterCell
|
||||
index={ i }
|
||||
key={ column.dataField }
|
||||
column={ column }
|
||||
columnData={ columnData }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
if (selectRow && selectRow.hideSelectColumn !== true) {
|
||||
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
|
||||
childrens.unshift(<SelectionFooterCellComp key="selection" />);
|
||||
} else {
|
||||
childrens.push(<SelectionFooterCellComp key="selection" />);
|
||||
}
|
||||
}
|
||||
|
||||
if (expandRow.showExpandColumn) {
|
||||
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
|
||||
childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
|
||||
} else {
|
||||
childrens.push(<ExpansionFooterCellComp key="expansion" />);
|
||||
}
|
||||
return (
|
||||
<FooterCell
|
||||
index={ i }
|
||||
key={ column.dataField }
|
||||
column={ column }
|
||||
columnData={ columnData }
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<tfoot>
|
||||
<tr className={ className }>
|
||||
{ childrens }
|
||||
</tr>
|
||||
<RowTemplate
|
||||
renderContent={ renderContent }
|
||||
selectRow={ selectRow }
|
||||
expandRow={ expandRow }
|
||||
className={ className }
|
||||
cellEl="th"
|
||||
/>
|
||||
</tfoot>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
export default ExtendBase =>
|
||||
class ColumnResolver extends ExtendBase {
|
||||
visibleColumnSize(includeSelectColumn = true) {
|
||||
let columnLen = this.props.columns.filter(c => !c.hidden).length;
|
||||
let columnLen;
|
||||
if (this.props.columnToggle && this.props.columnToggle.toggles) {
|
||||
const columns = this.props.columnToggle.toggles;
|
||||
columnLen = Object.keys(columns).filter(name => columns[name]).length;
|
||||
} else {
|
||||
columnLen = this.props.columns.filter(c => !c.hidden).length;
|
||||
}
|
||||
if (!includeSelectColumn) return columnLen;
|
||||
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
|
||||
columnLen += 1;
|
||||
|
||||
@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
|
||||
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
|
||||
|
||||
return (
|
||||
<td onClick={ this.handleClick } { ...attrs }>
|
||||
<td className="expand-cell" onClick={ this.handleClick } { ...attrs }>
|
||||
{
|
||||
expandColumnRenderer ? expandColumnRenderer({
|
||||
expandable,
|
||||
|
||||
@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<th data-row-selection { ...attrs }>
|
||||
<th className="expand-cell-header" data-row-selection { ...attrs }>
|
||||
{
|
||||
expandHeaderColumnRenderer ?
|
||||
expandHeaderColumnRenderer({ isAnyExpands }) :
|
||||
|
||||
@@ -9,6 +9,7 @@ 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,
|
||||
@@ -38,6 +39,22 @@ 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 onClick={ this.handleClick } { ...attrs }>
|
||||
<td className="selection-cell" onClick={ this.handleClick } { ...attrs }>
|
||||
{
|
||||
selectionRenderer ? selectionRenderer({
|
||||
mode: inputType,
|
||||
|
||||
@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<th data-row-selection { ...attrs }>{ content }</th>
|
||||
<th className="selection-cell-header" data-row-selection { ...attrs }>{ content }</th>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
48
packages/react-bootstrap-table2/src/row/row-template.js
vendored
Normal file
48
packages/react-bootstrap-table2/src/row/row-template.js
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
/* eslint react/require-default-props: 0 */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Const from '../const';
|
||||
|
||||
const RowTemplate = (props) => {
|
||||
const {
|
||||
renderContent,
|
||||
selectRow,
|
||||
expandRow,
|
||||
cellEl,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const isRenderFunctionColumnInLeft = (
|
||||
position = Const.INDICATOR_POSITION_LEFT
|
||||
) => position === Const.INDICATOR_POSITION_LEFT;
|
||||
|
||||
const childrens = renderContent() || [];
|
||||
|
||||
if (selectRow && selectRow.hideSelectColumn !== true) {
|
||||
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
|
||||
childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
|
||||
} else {
|
||||
childrens.push(React.createElement(cellEl, { key: 'selection' }));
|
||||
}
|
||||
}
|
||||
|
||||
if (expandRow.showExpandColumn) {
|
||||
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
|
||||
childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
|
||||
} else {
|
||||
childrens.push(React.createElement(cellEl, { key: 'expansion' }));
|
||||
}
|
||||
}
|
||||
|
||||
return <tr { ...rest }>{ childrens }</tr>;
|
||||
};
|
||||
|
||||
RowTemplate.propTypes = {
|
||||
renderContent: PropTypes.func.isRequired,
|
||||
cellEl: PropTypes.string.isRequired,
|
||||
selectRow: PropTypes.object,
|
||||
expandRow: PropTypes.object
|
||||
};
|
||||
|
||||
export default RowTemplate;
|
||||
@@ -48,7 +48,7 @@ describe('Footer', () => {
|
||||
|
||||
describe('simplest footer', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
wrapper = render(
|
||||
<Footer
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
@@ -61,7 +61,7 @@ describe('Footer', () => {
|
||||
it('should render successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('tr').length).toBe(1);
|
||||
expect(wrapper.find(FooterCell).length).toBe(columns.length);
|
||||
expect(wrapper.find('th').length).toBe(columns.length);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -86,7 +86,7 @@ describe('Footer', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when selecrRow prop is enable', () => {
|
||||
describe('when selectRow prop is enable', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = render(
|
||||
<Footer
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
exports[`<SelectionCell /> render should render component correctly 1`] = `
|
||||
<td
|
||||
className="selection-cell"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<input
|
||||
|
||||
83
yarn.lock
83
yarn.lock
@@ -54,15 +54,10 @@ acorn@^4.0.3, acorn@^4.0.4:
|
||||
version "4.0.13"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
|
||||
|
||||
acorn@^5.0.0:
|
||||
acorn@^5.0.0, acorn@^5.2.1:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
|
||||
|
||||
acorn@^5.5.0:
|
||||
version "5.7.3"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
|
||||
integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
|
||||
|
||||
add-stream@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
|
||||
@@ -78,7 +73,7 @@ ajv@^4.9.1:
|
||||
co "^4.6.0"
|
||||
json-stable-stringify "^1.0.1"
|
||||
|
||||
ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
|
||||
ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
|
||||
version "5.5.2"
|
||||
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
|
||||
dependencies:
|
||||
@@ -2538,10 +2533,9 @@ doctrine@1.5.0:
|
||||
esutils "^2.0.2"
|
||||
isarray "^1.0.0"
|
||||
|
||||
doctrine@^2.0.0, doctrine@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
|
||||
integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
|
||||
doctrine@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
|
||||
@@ -2958,38 +2952,32 @@ eslint-scope@^3.7.1:
|
||||
esrecurse "^4.1.0"
|
||||
estraverse "^4.1.1"
|
||||
|
||||
eslint-visitor-keys@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
|
||||
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
|
||||
|
||||
eslint@4.18.2:
|
||||
version "4.18.2"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45"
|
||||
integrity sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==
|
||||
eslint@4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.5.0.tgz#bb75d3b8bde97fb5e13efcd539744677feb019c3"
|
||||
dependencies:
|
||||
ajv "^5.3.0"
|
||||
ajv "^5.2.0"
|
||||
babel-code-frame "^6.22.0"
|
||||
chalk "^2.1.0"
|
||||
concat-stream "^1.6.0"
|
||||
cross-spawn "^5.1.0"
|
||||
debug "^3.1.0"
|
||||
doctrine "^2.1.0"
|
||||
debug "^2.6.8"
|
||||
doctrine "^2.0.0"
|
||||
eslint-scope "^3.7.1"
|
||||
eslint-visitor-keys "^1.0.0"
|
||||
espree "^3.5.2"
|
||||
espree "^3.5.0"
|
||||
esquery "^1.0.0"
|
||||
estraverse "^4.2.0"
|
||||
esutils "^2.0.2"
|
||||
file-entry-cache "^2.0.0"
|
||||
functional-red-black-tree "^1.0.1"
|
||||
glob "^7.1.2"
|
||||
globals "^11.0.1"
|
||||
globals "^9.17.0"
|
||||
ignore "^3.3.3"
|
||||
imurmurhash "^0.1.4"
|
||||
inquirer "^3.0.6"
|
||||
is-resolvable "^1.0.0"
|
||||
js-yaml "^3.9.1"
|
||||
json-stable-stringify-without-jsonify "^1.0.1"
|
||||
json-stable-stringify "^1.0.1"
|
||||
levn "^0.3.0"
|
||||
lodash "^4.17.4"
|
||||
minimatch "^3.0.2"
|
||||
@@ -2997,21 +2985,20 @@ eslint@4.18.2:
|
||||
natural-compare "^1.4.0"
|
||||
optionator "^0.8.2"
|
||||
path-is-inside "^1.0.2"
|
||||
pluralize "^7.0.0"
|
||||
pluralize "^4.0.0"
|
||||
progress "^2.0.0"
|
||||
require-uncached "^1.0.3"
|
||||
semver "^5.3.0"
|
||||
strip-ansi "^4.0.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
table "4.0.2"
|
||||
table "^4.0.1"
|
||||
text-table "~0.2.0"
|
||||
|
||||
espree@^3.5.2:
|
||||
version "3.5.4"
|
||||
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
|
||||
integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
|
||||
espree@^3.5.0:
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
|
||||
dependencies:
|
||||
acorn "^5.5.0"
|
||||
acorn "^5.2.1"
|
||||
acorn-jsx "^3.0.0"
|
||||
|
||||
esprima@^2.6.0:
|
||||
@@ -3724,12 +3711,7 @@ global-prefix@^1.0.1:
|
||||
is-windows "^1.0.1"
|
||||
which "^1.2.14"
|
||||
|
||||
globals@^11.0.1:
|
||||
version "11.12.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
|
||||
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
|
||||
|
||||
globals@^9.18.0:
|
||||
globals@^9.17.0, globals@^9.18.0:
|
||||
version "9.18.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
|
||||
|
||||
@@ -5043,11 +5025,6 @@ json-schema@0.2.3:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
|
||||
|
||||
json-stable-stringify-without-jsonify@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
|
||||
integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
|
||||
|
||||
json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
|
||||
@@ -6483,10 +6460,9 @@ plugin-error@0.1.2, plugin-error@^0.1.2:
|
||||
arr-union "^2.0.1"
|
||||
extend-shallow "^1.1.2"
|
||||
|
||||
pluralize@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
|
||||
integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
|
||||
pluralize@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
|
||||
|
||||
pn@^1.0.0:
|
||||
version "1.1.0"
|
||||
@@ -7536,7 +7512,11 @@ semver-greatest-satisfied-range@^1.0.0:
|
||||
dependencies:
|
||||
sver-compat "^1.5.0"
|
||||
|
||||
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
|
||||
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0:
|
||||
version "5.4.1"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
|
||||
|
||||
semver@^5.4.1:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
|
||||
|
||||
@@ -8063,10 +8043,9 @@ symbol-tree@^3.2.1:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
|
||||
|
||||
table@4.0.2:
|
||||
table@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
|
||||
integrity sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==
|
||||
dependencies:
|
||||
ajv "^5.2.3"
|
||||
ajv-keywords "^2.1.0"
|
||||
|
||||
Reference in New Issue
Block a user