diff --git a/packages/react-bootstrap-table2-example/examples/sticky-header/customized-style.js b/packages/react-bootstrap-table2-example/examples/sticky-header/customized-style.js new file mode 100644 index 0000000..9b3460d --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/sticky-header/customized-style.js @@ -0,0 +1,55 @@ +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 style = `\ +// Customizing your own sticky table style by simply overwriting .table-sticky +.react-bootstrap-table { + .sticky.table-sticky { + tbody { + max-height: 200px; + } + } +} +`; + +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 () => ( +
+ + + { style } + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 6502e78..9a5930a 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -170,6 +170,7 @@ import TableOverlay from 'examples/loading-overlay/table-overlay'; // sticky header table import StickyHeaderTable from 'examples/sticky-header/default'; +import StickyHeaderCustomStyleTable from 'examples/sticky-header/customized-style.js'; // remote import RemoteSort from 'examples/remote/remote-sort'; @@ -367,7 +368,8 @@ storiesOf('Export CSV', module) storiesOf('Sticky header', module) .addDecorator(bootstrapStyle()) - .add('Default sticky header', () => ); + .add('Default sticky header', () => ) + .add('Custom style for sticky header', () => ); storiesOf('EmptyTableOverlay', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/sticky/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/sticky/_index.scss new file mode 100644 index 0000000..2ccb57d --- /dev/null +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/sticky/_index.scss @@ -0,0 +1,7 @@ +.react-bootstrap-table { + .sticky.table-sticky { + tbody { + max-height: 200px; + } + } +} diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss index 14959a6..d40ff8e 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss @@ -12,3 +12,4 @@ @import "sort/index"; @import "search/index"; @import "loading-overlay/index"; +@import "sticky/index";