diff --git a/packages/react-bootstrap-table2-example/examples/sticky-header/default.js b/packages/react-bootstrap-table2-example/examples/sticky-header/default.js new file mode 100644 index 0000000..e7e373e --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/sticky-header/default.js @@ -0,0 +1,43 @@ +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(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +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' +}]; + + +`; + +export default () => ( +
+ + + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 7ba6b1b..6502e78 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -168,6 +168,9 @@ import CustomCSV from 'examples/csv/custom-csv'; import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay'; import TableOverlay from 'examples/loading-overlay/table-overlay'; +// sticky header table +import StickyHeaderTable from 'examples/sticky-header/default'; + // remote import RemoteSort from 'examples/remote/remote-sort'; import RemoteFilter from 'examples/remote/remote-filter'; @@ -362,6 +365,10 @@ storiesOf('Export CSV', module) .add('Export Custom Data', () => ) .add('Custom CSV', () => ); +storiesOf('Sticky header', module) + .addDecorator(bootstrapStyle()) + .add('Default sticky header', () => ); + storiesOf('EmptyTableOverlay', module) .addDecorator(bootstrapStyle()) .add('Empty Table Overlay', () => ) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 0c5c862..cbec3c7 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -57,7 +57,8 @@ class BootstrapTable extends PropsBaseResolver(Component) { rowEvents, selectRow, expandRow, - cellEdit + cellEdit, + sticky } = this.props; const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses); @@ -66,7 +67,8 @@ class BootstrapTable extends PropsBaseResolver(Component) { 'table-striped': striped, 'table-hover': hover, 'table-bordered': bordered, - 'table-condensed': condensed + 'table-condensed': condensed, + 'table-sticky': sticky }, classes); const tableCaption = (caption && { caption }); @@ -118,6 +120,7 @@ BootstrapTable.propTypes = { noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), striped: PropTypes.bool, bordered: PropTypes.bool, + sticky: PropTypes.bool, hover: PropTypes.bool, tabIndexCell: PropTypes.bool, id: PropTypes.string, @@ -190,6 +193,7 @@ BootstrapTable.defaultProps = { remote: false, striped: false, bordered: true, + sticky: false, hover: false, condensed: false, noDataIndication: null, diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js index 3d6f023..7ffe9b1 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js @@ -73,7 +73,7 @@ export default class SelectionCell extends Component { { ({ bootstrap4 }) => ( - + { selectionRenderer ? selectionRenderer({ mode: inputType, diff --git a/packages/react-bootstrap-table2/style/partials/_all.scss b/packages/react-bootstrap-table2/style/partials/_all.scss new file mode 100644 index 0000000..a83c1f0 --- /dev/null +++ b/packages/react-bootstrap-table2/style/partials/_all.scss @@ -0,0 +1 @@ +@import "./sticky"; diff --git a/packages/react-bootstrap-table2/style/partials/_sticky.scss b/packages/react-bootstrap-table2/style/partials/_sticky.scss new file mode 100644 index 0000000..c8f19a8 --- /dev/null +++ b/packages/react-bootstrap-table2/style/partials/_sticky.scss @@ -0,0 +1,29 @@ +.react-bootstrap-table { + .table-sticky { + thead, + tbody { + display: block; + width: 100%; + + tr { + display: inline-flex; + width: 100%; + + th, + td { + width: 100%; + + &[data-row-selection] { + width: 30px; + min-width: 30px; + } + } + } + } + + tbody { + max-height: 400px; + overflow-y: auto; + } + } +} diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss index 5974e45..fefd958 100644 --- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss +++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss @@ -1,3 +1,5 @@ +@import "partials/all"; + .react-bootstrap-table { table { @@ -55,8 +57,10 @@ content: "\2193"; } - th[data-row-selection] { + th[data-row-selection], + td[data-row-selection] { width: 30px; + min-width: 30px; } th > .selection-input-4,