mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-29 05:30:05 +00:00
Compare commits
4 Commits
react-boot
...
react-boot
| Author | SHA1 | Date | |
|---|---|---|---|
|
3d37a31103 | ||
|
|
f4f6649b91 | ||
|
|
8ecdbf611b | ||
|
|
4a340c714b |
@@ -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 () => (
|
export default () => (
|
||||||
<div>
|
<div>
|
||||||
<BootstrapTable
|
<BootstrapTable
|
||||||
@@ -79,6 +96,8 @@ export default () => (
|
|||||||
columns={ columns }
|
columns={ columns }
|
||||||
filter={ filterFactory() }
|
filter={ filterFactory() }
|
||||||
filterPosition="top"
|
filterPosition="top"
|
||||||
|
expandRow={ expandRow }
|
||||||
|
selectRow={ selectRow }
|
||||||
/>
|
/>
|
||||||
<Code>{ sourceCode1 }</Code>
|
<Code>{ sourceCode1 }</Code>
|
||||||
<BootstrapTable
|
<BootstrapTable
|
||||||
@@ -87,6 +106,8 @@ export default () => (
|
|||||||
columns={ columns }
|
columns={ columns }
|
||||||
filter={ filterFactory() }
|
filter={ filterFactory() }
|
||||||
filterPosition="bottom"
|
filterPosition="bottom"
|
||||||
|
expandRow={ expandRow }
|
||||||
|
selectRow={ selectRow }
|
||||||
/>
|
/>
|
||||||
<Code>{ sourceCode2 }</Code>
|
<Code>{ sourceCode2 }</Code>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-bootstrap-table2-example",
|
"name": "react-bootstrap-table2-example",
|
||||||
"version": "1.0.34",
|
"version": "1.0.35",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "react-bootstrap-table-next",
|
"name": "react-bootstrap-table-next",
|
||||||
"version": "3.3.1",
|
"version": "3.3.2",
|
||||||
"description": "Next generation of react-bootstrap-table",
|
"description": "Next generation of react-bootstrap-table",
|
||||||
"main": "./lib/index.js",
|
"main": "./lib/index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|||||||
@@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
|
|||||||
currFilters={ this.props.currFilters }
|
currFilters={ this.props.currFilters }
|
||||||
filterPosition={ this.props.filterPosition }
|
filterPosition={ this.props.filterPosition }
|
||||||
onExternalFilter={ this.props.onExternalFilter }
|
onExternalFilter={ this.props.onExternalFilter }
|
||||||
|
selectRow={ selectRow }
|
||||||
|
expandRow={ expandRow }
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Body
|
<Body
|
||||||
|
|||||||
51
packages/react-bootstrap-table2/src/filters.js
vendored
51
packages/react-bootstrap-table2/src/filters.js
vendored
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
|||||||
|
|
||||||
import FiltersCell from './filters-cell';
|
import FiltersCell from './filters-cell';
|
||||||
import Const from './const';
|
import Const from './const';
|
||||||
|
import RowTemplate from './row/row-template';
|
||||||
|
|
||||||
const Filters = (props) => {
|
const Filters = (props) => {
|
||||||
const {
|
const {
|
||||||
@@ -12,28 +13,33 @@ const Filters = (props) => {
|
|||||||
currFilters,
|
currFilters,
|
||||||
filterPosition,
|
filterPosition,
|
||||||
onExternalFilter,
|
onExternalFilter,
|
||||||
className
|
className,
|
||||||
|
selectRow,
|
||||||
|
expandRow
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const filterColumns = [];
|
function renderContent() {
|
||||||
let showFiltersRow = false;
|
const filterColumns = [];
|
||||||
|
let showFiltersRow = false;
|
||||||
|
|
||||||
columns.forEach((column, i) => {
|
columns.forEach((column, i) => {
|
||||||
filterColumns.push(<FiltersCell
|
filterColumns.push(<FiltersCell
|
||||||
index={ i }
|
index={ i }
|
||||||
key={ column.dataField }
|
key={ column.dataField }
|
||||||
column={ column }
|
column={ column }
|
||||||
currFilters={ currFilters }
|
currFilters={ currFilters }
|
||||||
onExternalFilter={ onExternalFilter }
|
onExternalFilter={ onExternalFilter }
|
||||||
onFilter={ onFilter }
|
onFilter={ onFilter }
|
||||||
/>);
|
/>);
|
||||||
|
|
||||||
if (column.filterRenderer || column.filter) {
|
if (column.filterRenderer || column.filter) {
|
||||||
if (!showFiltersRow) {
|
if (!showFiltersRow) {
|
||||||
showFiltersRow = true;
|
showFiltersRow = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
return filterColumns;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tbody
|
<tbody
|
||||||
@@ -45,7 +51,12 @@ const Filters = (props) => {
|
|||||||
: 'table-footer-group'
|
: 'table-footer-group'
|
||||||
} }
|
} }
|
||||||
>
|
>
|
||||||
<tr>{filterColumns}</tr>
|
<RowTemplate
|
||||||
|
renderContent={ renderContent }
|
||||||
|
selectRow={ selectRow }
|
||||||
|
expandRow={ expandRow }
|
||||||
|
cellEl="td"
|
||||||
|
/>
|
||||||
</tbody>
|
</tbody>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -60,7 +71,9 @@ Filters.propTypes = {
|
|||||||
]),
|
]),
|
||||||
currFilters: PropTypes.object,
|
currFilters: PropTypes.object,
|
||||||
onExternalFilter: PropTypes.func,
|
onExternalFilter: PropTypes.func,
|
||||||
className: PropTypes.string
|
className: PropTypes.string,
|
||||||
|
selectRow: PropTypes.object,
|
||||||
|
expandRow: PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
Filters.defaultProps = {
|
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 React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import Const from './const';
|
import RowTemplate from './row/row-template';
|
||||||
import FooterCell from './footer-cell';
|
import FooterCell from './footer-cell';
|
||||||
import _ from './utils';
|
import _ from './utils';
|
||||||
|
|
||||||
const Footer = (props) => {
|
const Footer = (props) => {
|
||||||
const { data, className, columns, selectRow, expandRow } = props;
|
const { data, className, columns, selectRow, expandRow } = props;
|
||||||
const SelectionFooterCellComp = () => <th />;
|
|
||||||
const ExpansionFooterCellComp = () => <th />;
|
|
||||||
|
|
||||||
const isRenderFunctionColumnInLeft = (
|
function renderContent() {
|
||||||
position = Const.INDICATOR_POSITION_LEFT
|
return columns.map((column, i) => {
|
||||||
) => position === Const.INDICATOR_POSITION_LEFT;
|
if (column.footer === undefined || column.footer === null) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const childrens = columns.map((column, i) => {
|
const columnData = _.pluck(data, column.dataField);
|
||||||
if (column.footer === undefined || column.footer === null) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const columnData = _.pluck(data, column.dataField);
|
return (
|
||||||
|
<FooterCell
|
||||||
return (
|
index={ i }
|
||||||
<FooterCell
|
key={ column.dataField }
|
||||||
index={ i }
|
column={ column }
|
||||||
key={ column.dataField }
|
columnData={ columnData }
|
||||||
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 (
|
return (
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr className={ className }>
|
<RowTemplate
|
||||||
{ childrens }
|
renderContent={ renderContent }
|
||||||
</tr>
|
selectRow={ selectRow }
|
||||||
|
expandRow={ expandRow }
|
||||||
|
className={ className }
|
||||||
|
cellEl="th"
|
||||||
|
/>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,13 @@
|
|||||||
export default ExtendBase =>
|
export default ExtendBase =>
|
||||||
class ColumnResolver extends ExtendBase {
|
class ColumnResolver extends ExtendBase {
|
||||||
visibleColumnSize(includeSelectColumn = true) {
|
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 (!includeSelectColumn) return columnLen;
|
||||||
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
|
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
|
||||||
columnLen += 1;
|
columnLen += 1;
|
||||||
|
|||||||
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', () => {
|
describe('simplest footer', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = shallow(
|
wrapper = render(
|
||||||
<Footer
|
<Footer
|
||||||
data={ data }
|
data={ data }
|
||||||
columns={ columns }
|
columns={ columns }
|
||||||
@@ -61,7 +61,7 @@ describe('Footer', () => {
|
|||||||
it('should render successfully', () => {
|
it('should render successfully', () => {
|
||||||
expect(wrapper.length).toBe(1);
|
expect(wrapper.length).toBe(1);
|
||||||
expect(wrapper.find('tr').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(() => {
|
beforeEach(() => {
|
||||||
wrapper = render(
|
wrapper = render(
|
||||||
<Footer
|
<Footer
|
||||||
|
|||||||
Reference in New Issue
Block a user