mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-29 05:30:05 +00:00
Compare commits
18 Commits
react-boot
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cbd0194f45 | ||
|
|
ec742a43f6 | ||
|
|
7138b68559 | ||
|
|
e6e7d6f9d2 | ||
|
|
909a6e211e | ||
|
|
83c9d69e27 | ||
|
|
aad2ad3823 | ||
|
|
9190cfc6d9 | ||
|
|
45b133579b | ||
|
|
970f7c0d15 | ||
|
|
def898f636 | ||
|
|
be916d81a3 | ||
|
|
49d1ce8812 | ||
|
|
18caf0ac8d | ||
|
|
1b9bd63370 | ||
|
|
b2121fdf24 | ||
|
|
4aaf140de5 | ||
|
|
569aa0195e |
@@ -32,6 +32,7 @@
|
||||
* [defaultSortDirection](#defaultSortDirection)
|
||||
* [pagination](#pagination)
|
||||
* [filter](#filter)
|
||||
* [filterPosition](filterPosition)
|
||||
* [onTableChange](#onTableChange)
|
||||
* [onDataSizeChange](#onDataSizeChange)
|
||||
|
||||
@@ -208,6 +209,8 @@ const defaultSorted = [{
|
||||
}];
|
||||
```
|
||||
|
||||
**Note**: Only the first column is sorted currently, see #1083.
|
||||
|
||||
### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
|
||||
Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
|
||||
|
||||
@@ -327,6 +330,9 @@ Following is a shape of `newState`
|
||||
}
|
||||
```
|
||||
|
||||
### <a name='filterPosition'>filterPosition - [String]</a>
|
||||
Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
|
||||
|
||||
### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
|
||||
This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
"enzyme": "3.4.0",
|
||||
"enzyme-adapter-react-16.3": "1.0.0",
|
||||
"enzyme-to-json": "3.3.4",
|
||||
"eslint": "4.5.0",
|
||||
"eslint": "4.18.2",
|
||||
"eslint-config-airbnb": "15.1.0",
|
||||
"eslint-loader": "1.9.0",
|
||||
"eslint-plugin-import": "2.7.0",
|
||||
@@ -80,7 +80,7 @@
|
||||
"webpack-dev-server": "2.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "2.2.5",
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "15.5.10",
|
||||
"react": "16.4.0",
|
||||
"react-dom": "16.4.0",
|
||||
|
||||
93
packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
vendored
Normal file
93
packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const products = productsGenerator(8);
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name',
|
||||
filter: textFilter()
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
filter: textFilter()
|
||||
}];
|
||||
|
||||
const sourceCode1 = `\
|
||||
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()
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
filter: textFilter()
|
||||
}];
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="top"
|
||||
/>
|
||||
`;
|
||||
|
||||
const sourceCode2 = `\
|
||||
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()
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
filter: textFilter()
|
||||
}];
|
||||
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="bottom"
|
||||
/>
|
||||
`;
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="top"
|
||||
/>
|
||||
<Code>{ sourceCode1 }</Code>
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="bottom"
|
||||
/>
|
||||
<Code>{ sourceCode2 }</Code>
|
||||
</div>
|
||||
);
|
||||
@@ -8,14 +8,17 @@ const products = productsGenerator(8);
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
text: 'Product ID',
|
||||
footer: 'hello'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name',
|
||||
footer: 'hello',
|
||||
filter: textFilter()
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
footer: 'hello',
|
||||
filter: textFilter()
|
||||
}];
|
||||
|
||||
@@ -39,6 +42,11 @@ const columns = [{
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
|
||||
`;
|
||||
|
||||
const selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
@@ -46,6 +54,8 @@ export default () => (
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="bottom"
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
|
||||
@@ -36,11 +36,12 @@ const columns = [{
|
||||
|
||||
const MyExportCSV = (props) => {
|
||||
const handleClick = () => {
|
||||
props.onExport();
|
||||
// passing my custom data
|
||||
props.onExport(products.filter(r => r.id > 2));
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
|
||||
<button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-bootstrap-table2-example",
|
||||
"version": "1.0.31",
|
||||
"version": "1.0.32",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
|
||||
@@ -92,6 +92,7 @@ import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
|
||||
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
|
||||
import FilterHooks from 'examples/column-filter/filter-hooks';
|
||||
import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
|
||||
import FilterPosition from 'examples/column-filter/filter-position';
|
||||
|
||||
// work on rows
|
||||
import RowStyleTable from 'examples/rows/row-style';
|
||||
@@ -314,6 +315,7 @@ storiesOf('Column Filter', module)
|
||||
.add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
|
||||
.add('Date Filter', () => <DateFilter />)
|
||||
.add('Date Filter with Default Value', () => <DateFilterWithDefaultValue />)
|
||||
.add('Filter Position', () => <FilterPosition />)
|
||||
.add('Custom Text Filter', () => <CustomTextFilter />)
|
||||
.add('Custom Select Filter', () => <CustomSelectFilter />)
|
||||
.add('Custom Number Filter', () => <CustomNumberFilter />)
|
||||
|
||||
@@ -330,3 +330,29 @@ Following properties is valid in `FILTER_TYPES`:
|
||||
* NUMBER
|
||||
* DATE
|
||||
* MULTISELECT
|
||||
|
||||
### Position
|
||||
Default filter is rendered inside the table column header, but you can choose to render them as a row by `filterPosition`:
|
||||
|
||||
#### Render in the top of table body
|
||||
|
||||
```js
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="top"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Render in the bottom of table body
|
||||
```js
|
||||
<BootstrapTable
|
||||
keyField='id'
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
filter={ filterFactory() }
|
||||
filterPosition="bottom"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-bootstrap-table-next",
|
||||
"version": "3.2.0",
|
||||
"version": "3.2.1",
|
||||
"description": "Next generation of react-bootstrap-table",
|
||||
"main": "./lib/index.js",
|
||||
"repository": {
|
||||
|
||||
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
|
||||
import cs from 'classnames';
|
||||
|
||||
import Header from './header';
|
||||
import Filters from './filters';
|
||||
import Caption from './caption';
|
||||
import Body from './body';
|
||||
import Footer from './footer';
|
||||
@@ -65,7 +66,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
|
||||
rowEvents,
|
||||
selectRow,
|
||||
expandRow,
|
||||
cellEdit
|
||||
cellEdit,
|
||||
filterPosition
|
||||
} = this.props;
|
||||
|
||||
const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
|
||||
@@ -77,6 +79,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
|
||||
[bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
|
||||
}, classes);
|
||||
|
||||
const hasFilters = columns.some(col => col.filter || col.filterRenderer);
|
||||
|
||||
const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
|
||||
|
||||
const tableCaption = (caption && <Caption>{ caption }</Caption>);
|
||||
@@ -96,7 +100,19 @@ class BootstrapTable extends PropsBaseResolver(Component) {
|
||||
onExternalFilter={ this.props.onExternalFilter }
|
||||
selectRow={ selectRow }
|
||||
expandRow={ expandRow }
|
||||
filterPosition={ filterPosition }
|
||||
/>
|
||||
{hasFilters && filterPosition !== Const.FILTERS_POSITION_INLINE && (
|
||||
<Filters
|
||||
columns={ columns }
|
||||
className={ this.props.filtersClasses }
|
||||
onSort={ this.props.onSort }
|
||||
onFilter={ this.props.onFilter }
|
||||
currFilters={ this.props.currFilters }
|
||||
filterPosition={ this.props.filterPosition }
|
||||
onExternalFilter={ this.props.onExternalFilter }
|
||||
/>
|
||||
)}
|
||||
<Body
|
||||
data={ this.getData() }
|
||||
keyField={ keyField }
|
||||
@@ -135,7 +151,7 @@ BootstrapTable.propTypes = {
|
||||
remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
|
||||
pagination: PropTypes.bool
|
||||
})]),
|
||||
noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
noDataIndication: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
||||
striped: PropTypes.bool,
|
||||
bordered: PropTypes.bool,
|
||||
hover: PropTypes.bool,
|
||||
@@ -199,6 +215,12 @@ BootstrapTable.propTypes = {
|
||||
rowEvents: PropTypes.object,
|
||||
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
headerClasses: PropTypes.string,
|
||||
filtersClasses: PropTypes.string,
|
||||
filterPosition: PropTypes.oneOf([
|
||||
Const.FILTERS_POSITION_TOP,
|
||||
Const.FILTERS_POSITION_INLINE,
|
||||
Const.FILTERS_POSITION_BOTTOM
|
||||
]),
|
||||
footerClasses: PropTypes.string,
|
||||
defaultSorted: PropTypes.arrayOf(PropTypes.shape({
|
||||
dataField: PropTypes.string.isRequired,
|
||||
@@ -240,7 +262,8 @@ BootstrapTable.defaultProps = {
|
||||
cellEdit: {
|
||||
mode: null,
|
||||
nonEditableRows: []
|
||||
}
|
||||
},
|
||||
filterPosition: Const.FILTERS_POSITION_INLINE
|
||||
};
|
||||
|
||||
export default BootstrapTable;
|
||||
|
||||
5
packages/react-bootstrap-table2/src/const.js
vendored
5
packages/react-bootstrap-table2/src/const.js
vendored
@@ -12,5 +12,8 @@ export default {
|
||||
TYPE_STRING: 'string',
|
||||
TYPE_NUMBER: 'number',
|
||||
TYPE_BOOLEAN: 'bool',
|
||||
TYPE_DATE: 'date'
|
||||
TYPE_DATE: 'date',
|
||||
FILTERS_POSITION_INLINE: 'inline',
|
||||
FILTERS_POSITION_TOP: 'top',
|
||||
FILTERS_POSITION_BOTTOM: 'bottom'
|
||||
};
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Const from '../const';
|
||||
import _ from '../utils';
|
||||
|
||||
import dataOperator from '../store/operators';
|
||||
import { getSelectionSummary } from '../store/selection';
|
||||
@@ -72,7 +73,7 @@ class SelectionProvider extends React.Component {
|
||||
if (!isUnSelect) {
|
||||
currSelected = selected.concat(dataOperator.selectableKeys(data, keyField, nonSelectable));
|
||||
} else {
|
||||
currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
|
||||
currSelected = selected.filter(s => typeof data.find(d => _.get(d, keyField) === s) === 'undefined');
|
||||
}
|
||||
|
||||
let result;
|
||||
|
||||
49
packages/react-bootstrap-table2/src/filters-cell.js
vendored
Normal file
49
packages/react-bootstrap-table2/src/filters-cell.js
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from './utils';
|
||||
|
||||
const FiltersCell = (props) => {
|
||||
const {
|
||||
index, column, onExternalFilter,
|
||||
currFilters, onFilter
|
||||
} = props;
|
||||
const { filterRenderer, filter } = column;
|
||||
let filterElm;
|
||||
const cellAttrs = {};
|
||||
const cellStyle = {};
|
||||
cellAttrs.style = cellStyle;
|
||||
if (column.headerAlign) {
|
||||
cellStyle.textAlign = _.isFunction(column.headerAlign)
|
||||
? column.headerAlign(column, index)
|
||||
: column.headerAlign;
|
||||
}
|
||||
if (column.filterRenderer) {
|
||||
const onCustomFilter = onExternalFilter(column, filter.props.type);
|
||||
filterElm = filterRenderer(onCustomFilter, column);
|
||||
} else if (filter) {
|
||||
filterElm = (
|
||||
<filter.Filter
|
||||
{ ...filter.props }
|
||||
filterState={ currFilters[column.dataField] }
|
||||
onFilter={ onFilter }
|
||||
column={ column }
|
||||
/>
|
||||
);
|
||||
}
|
||||
return React.createElement('th', cellAttrs, filterElm);
|
||||
};
|
||||
|
||||
FiltersCell.propTypes = {
|
||||
index: PropTypes.number.isRequired,
|
||||
column: PropTypes.object.isRequired,
|
||||
currFilters: PropTypes.object.isRequired,
|
||||
onFilter: PropTypes.func,
|
||||
onExternalFilter: PropTypes.func
|
||||
};
|
||||
|
||||
FiltersCell.defaultProps = {
|
||||
onFilter: () => { },
|
||||
onExternalFilter: () => { }
|
||||
};
|
||||
|
||||
export default FiltersCell;
|
||||
69
packages/react-bootstrap-table2/src/filters.js
vendored
Normal file
69
packages/react-bootstrap-table2/src/filters.js
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
/* eslint react/require-default-props: 0 */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import FiltersCell from './filters-cell';
|
||||
import Const from './const';
|
||||
|
||||
const Filters = (props) => {
|
||||
const {
|
||||
columns,
|
||||
onFilter,
|
||||
currFilters,
|
||||
filterPosition,
|
||||
onExternalFilter,
|
||||
className
|
||||
} = props;
|
||||
|
||||
const filterColumns = [];
|
||||
let showFiltersRow = false;
|
||||
|
||||
columns.forEach((column, i) => {
|
||||
filterColumns.push(<FiltersCell
|
||||
index={ i }
|
||||
column={ column }
|
||||
currFilters={ currFilters }
|
||||
onExternalFilter={ onExternalFilter }
|
||||
onFilter={ onFilter }
|
||||
/>);
|
||||
|
||||
if (column.filterRenderer || column.filter) {
|
||||
if (!showFiltersRow) {
|
||||
showFiltersRow = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<tbody
|
||||
className={ className }
|
||||
style={ {
|
||||
display:
|
||||
filterPosition === Const.FILTERS_POSITION_TOP
|
||||
? 'table-header-group'
|
||||
: 'table-footer-group'
|
||||
} }
|
||||
>
|
||||
<tr>{filterColumns}</tr>
|
||||
</tbody>
|
||||
);
|
||||
};
|
||||
|
||||
Filters.propTypes = {
|
||||
columns: PropTypes.array.isRequired,
|
||||
onFilter: PropTypes.func,
|
||||
filterPosition: PropTypes.oneOf([
|
||||
Const.FILTERS_POSITION_TOP,
|
||||
Const.FILTERS_POSITION_INLINE,
|
||||
Const.FILTERS_POSITION_BOTTOM
|
||||
]),
|
||||
currFilters: PropTypes.object,
|
||||
onExternalFilter: PropTypes.func,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
Filters.defaultProps = {
|
||||
position: Const.FILTERS_POSITION_TOP
|
||||
};
|
||||
|
||||
export default Filters;
|
||||
@@ -21,6 +21,7 @@ class HeaderCell extends eventDelegater(React.Component) {
|
||||
isLastSorting,
|
||||
onFilter,
|
||||
currFilters,
|
||||
filterPosition,
|
||||
onExternalFilter
|
||||
} = this.props;
|
||||
|
||||
@@ -43,10 +44,14 @@ class HeaderCell extends eventDelegater(React.Component) {
|
||||
|
||||
const delegateEvents = this.delegate(headerEvents);
|
||||
|
||||
const customAttrs = _.isFunction(headerAttrs)
|
||||
? headerAttrs(column, index)
|
||||
: (headerAttrs || {});
|
||||
|
||||
const cellAttrs = {
|
||||
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
|
||||
...customAttrs,
|
||||
...delegateEvents,
|
||||
tabIndex: 0
|
||||
tabIndex: _.isDefined(customAttrs.tabIndex) ? customAttrs.tabIndex : 0
|
||||
};
|
||||
|
||||
let sortSymbol;
|
||||
@@ -100,18 +105,20 @@ class HeaderCell extends eventDelegater(React.Component) {
|
||||
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
|
||||
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
|
||||
|
||||
if (filterRenderer) {
|
||||
const onCustomFilter = onExternalFilter(column, filter.props.type);
|
||||
filterElm = filterRenderer(onCustomFilter, column);
|
||||
} else if (filter) {
|
||||
filterElm = (
|
||||
<filter.Filter
|
||||
{ ...filter.props }
|
||||
filterState={ currFilters[column.dataField] }
|
||||
onFilter={ onFilter }
|
||||
column={ column }
|
||||
/>
|
||||
);
|
||||
if (filterPosition === Const.FILTERS_POSITION_INLINE) {
|
||||
if (filterRenderer) {
|
||||
const onCustomFilter = onExternalFilter(column, filter.props.type);
|
||||
filterElm = filterRenderer(onCustomFilter, column);
|
||||
} else if (filter) {
|
||||
filterElm = (
|
||||
<filter.Filter
|
||||
{ ...filter.props }
|
||||
filterState={ currFilters[column.dataField] }
|
||||
onFilter={ onFilter }
|
||||
column={ column }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const children = headerFormatter ?
|
||||
@@ -176,6 +183,8 @@ HeaderCell.propTypes = {
|
||||
sortCaret: PropTypes.func,
|
||||
isLastSorting: PropTypes.bool,
|
||||
onFilter: PropTypes.func,
|
||||
filterPosition: PropTypes.oneOf([Const.FILTERS_POSITION_INLINE,
|
||||
Const.FILTERS_POSITION_BOTTOM, Const.FILTERS_POSITION_TOP]),
|
||||
currFilters: PropTypes.object,
|
||||
onExternalFilter: PropTypes.func
|
||||
};
|
||||
|
||||
15
packages/react-bootstrap-table2/src/header.js
vendored
15
packages/react-bootstrap-table2/src/header.js
vendored
@@ -18,9 +18,10 @@ const Header = (props) => {
|
||||
sortField,
|
||||
sortOrder,
|
||||
selectRow,
|
||||
expandRow,
|
||||
currFilters,
|
||||
onExternalFilter,
|
||||
expandRow
|
||||
filterPosition
|
||||
} = props;
|
||||
|
||||
let SelectionHeaderCellComp = () => null;
|
||||
@@ -50,11 +51,12 @@ const Header = (props) => {
|
||||
column={ column }
|
||||
onSort={ onSort }
|
||||
sorting={ currSort }
|
||||
sortOrder={ sortOrder }
|
||||
isLastSorting={ isLastSorting }
|
||||
onFilter={ onFilter }
|
||||
currFilters={ currFilters }
|
||||
onExternalFilter={ onExternalFilter }
|
||||
sortOrder={ sortOrder }
|
||||
isLastSorting={ isLastSorting }
|
||||
filterPosition={ filterPosition }
|
||||
/>);
|
||||
})
|
||||
];
|
||||
@@ -94,7 +96,12 @@ Header.propTypes = {
|
||||
currFilters: PropTypes.object,
|
||||
onExternalFilter: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
expandRow: PropTypes.object
|
||||
expandRow: PropTypes.object,
|
||||
filterPosition: PropTypes.oneOf([
|
||||
Const.FILTERS_POSITION_TOP,
|
||||
Const.FILTERS_POSITION_INLINE,
|
||||
Const.FILTERS_POSITION_BOTTOM
|
||||
])
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -2,14 +2,14 @@ import _ from '../utils';
|
||||
import { getRowByRowId } from './rows';
|
||||
|
||||
export const getSelectionSummary = (
|
||||
data,
|
||||
data = [],
|
||||
keyField,
|
||||
selected = []
|
||||
) => {
|
||||
let allRowsSelected = data.length > 0;
|
||||
let allRowsNotSelected = true;
|
||||
|
||||
const rowKeys = data.map(d => d[keyField]);
|
||||
const rowKeys = data.map(d => _.get(d, keyField));
|
||||
for (let i = 0; i < rowKeys.length; i += 1) {
|
||||
const curr = rowKeys[i];
|
||||
if (typeof selected.find(x => x === curr) === 'undefined') {
|
||||
@@ -24,7 +24,7 @@ export const getSelectionSummary = (
|
||||
};
|
||||
};
|
||||
|
||||
export const selectableKeys = (data, keyField, skips = []) => {
|
||||
export const selectableKeys = (data = [], keyField, skips = []) => {
|
||||
if (skips.length === 0) {
|
||||
return data.map(row => _.get(row, keyField));
|
||||
}
|
||||
@@ -40,6 +40,6 @@ export const unSelectableKeys = (selected, skips = []) => {
|
||||
return selected.filter(x => _.contains(skips, x));
|
||||
};
|
||||
|
||||
export const getSelectedRows = (data, keyField, selected) =>
|
||||
export const getSelectedRows = (data = [], keyField, selected) =>
|
||||
selected.map(k => getRowByRowId(data, keyField, k)).filter(x => !!x);
|
||||
|
||||
|
||||
@@ -729,7 +729,13 @@ describe('HeaderCell', () => {
|
||||
}
|
||||
};
|
||||
wrapper = shallow(
|
||||
<HeaderCell column={ column } index={ index } onFilter={ onFilter } currFilters={ {} } />
|
||||
<HeaderCell
|
||||
column={ column }
|
||||
index={ index }
|
||||
onFilter={ onFilter }
|
||||
currFilters={ {} }
|
||||
filterPosition="inline"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -767,7 +773,12 @@ describe('HeaderCell', () => {
|
||||
filterRenderer
|
||||
};
|
||||
wrapper = shallow(
|
||||
<HeaderCell column={ column } index={ index } onExternalFilter={ onExternalFilter } />);
|
||||
<HeaderCell
|
||||
column={ column }
|
||||
index={ index }
|
||||
filterPosition="inline"
|
||||
onExternalFilter={ onExternalFilter }
|
||||
/>);
|
||||
});
|
||||
|
||||
it('should render successfully', () => {
|
||||
|
||||
90
yarn.lock
90
yarn.lock
@@ -54,10 +54,15 @@ 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.2.1:
|
||||
acorn@^5.0.0:
|
||||
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"
|
||||
@@ -73,7 +78,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.0, ajv@^5.2.3:
|
||||
ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
|
||||
version "5.5.2"
|
||||
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
|
||||
dependencies:
|
||||
@@ -1686,9 +1691,10 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@2.2.5:
|
||||
version "2.2.5"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
|
||||
classnames@^2.2.5:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
|
||||
|
||||
clean-css@4.1.9, clean-css@4.1.x:
|
||||
version "4.1.9"
|
||||
@@ -2532,9 +2538,10 @@ doctrine@1.5.0:
|
||||
esutils "^2.0.2"
|
||||
isarray "^1.0.0"
|
||||
|
||||
doctrine@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
|
||||
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==
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
|
||||
@@ -2951,32 +2958,38 @@ eslint-scope@^3.7.1:
|
||||
esrecurse "^4.1.0"
|
||||
estraverse "^4.1.1"
|
||||
|
||||
eslint@4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.5.0.tgz#bb75d3b8bde97fb5e13efcd539744677feb019c3"
|
||||
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==
|
||||
dependencies:
|
||||
ajv "^5.2.0"
|
||||
ajv "^5.3.0"
|
||||
babel-code-frame "^6.22.0"
|
||||
chalk "^2.1.0"
|
||||
concat-stream "^1.6.0"
|
||||
cross-spawn "^5.1.0"
|
||||
debug "^2.6.8"
|
||||
doctrine "^2.0.0"
|
||||
debug "^3.1.0"
|
||||
doctrine "^2.1.0"
|
||||
eslint-scope "^3.7.1"
|
||||
espree "^3.5.0"
|
||||
eslint-visitor-keys "^1.0.0"
|
||||
espree "^3.5.2"
|
||||
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 "^9.17.0"
|
||||
globals "^11.0.1"
|
||||
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 "^1.0.1"
|
||||
json-stable-stringify-without-jsonify "^1.0.1"
|
||||
levn "^0.3.0"
|
||||
lodash "^4.17.4"
|
||||
minimatch "^3.0.2"
|
||||
@@ -2984,20 +2997,21 @@ eslint@4.5.0:
|
||||
natural-compare "^1.4.0"
|
||||
optionator "^0.8.2"
|
||||
path-is-inside "^1.0.2"
|
||||
pluralize "^4.0.0"
|
||||
pluralize "^7.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.1"
|
||||
table "4.0.2"
|
||||
text-table "~0.2.0"
|
||||
|
||||
espree@^3.5.0:
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
|
||||
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==
|
||||
dependencies:
|
||||
acorn "^5.2.1"
|
||||
acorn "^5.5.0"
|
||||
acorn-jsx "^3.0.0"
|
||||
|
||||
esprima@^2.6.0:
|
||||
@@ -3710,7 +3724,12 @@ global-prefix@^1.0.1:
|
||||
is-windows "^1.0.1"
|
||||
which "^1.2.14"
|
||||
|
||||
globals@^9.17.0, globals@^9.18.0:
|
||||
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:
|
||||
version "9.18.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
|
||||
|
||||
@@ -5024,6 +5043,11 @@ 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"
|
||||
@@ -6459,9 +6483,10 @@ plugin-error@0.1.2, plugin-error@^0.1.2:
|
||||
arr-union "^2.0.1"
|
||||
extend-shallow "^1.1.2"
|
||||
|
||||
pluralize@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
|
||||
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==
|
||||
|
||||
pn@^1.0.0:
|
||||
version "1.1.0"
|
||||
@@ -7511,11 +7536,7 @@ 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:
|
||||
version "5.4.1"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
|
||||
|
||||
semver@^5.4.1:
|
||||
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
|
||||
|
||||
@@ -8042,9 +8063,10 @@ 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.1:
|
||||
table@4.0.2:
|
||||
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