diff --git a/.storybook/config.js b/.storybook/config.js index 79572dd..f8c8754 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -35,7 +35,7 @@ configure(() => { storiesOf('2. Demos') .add('Simple Table', Simple) .add('Cell Renderers & Custom Components', CellRenderers) - // .add('Max Widths', MaxWidths) + .add('Max Widths', MaxWidths) .add('Server-side Data', ServerSide) .add('Sub Components', SubComponents) .add('Pivoting & Aggregation', Pivoting) diff --git a/README.md b/README.md index 4351833..fc53c8f 100644 --- a/README.md +++ b/README.md @@ -205,7 +205,8 @@ Or just define them on the component per-instance sortable: true, sort: 'asc' or 'desc', // used to determine the column sorting on init show: true, // can be used to hide a column - minWidth: 100 // A minimum width for this column. If there is room, columns will flex to fill available space + minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set) + maxWidth: undefined // A maximum width for this column. // Cell Options className: '', // Set the classname of the `td` element of the column diff --git a/package.json b/package.json index 0726c69..c2eae8d 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ ], "scripts": { "build:node": "babel src --out-dir lib --source-maps inline", - "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --compress -o react-table.css", + "build:css": "rm -rf react-table.css && stylus src/index.styl --use autoprefixer-stylus --compress -o react-table.css", "watch": "npm-run-all --parallel watch:*", "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node", "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css", @@ -42,6 +42,7 @@ }, "devDependencies": { "@kadira/storybook": "^2.35.1", + "autoprefixer-stylus": "^0.13.0", "babel-cli": "6.14.0", "babel-eslint": "6.1.2", "babel-preset-es2015": "6.14.0", diff --git a/src/index.js b/src/index.js index 25bb65c..9ba5e3f 100644 --- a/src/index.js +++ b/src/index.js @@ -314,7 +314,8 @@ export default React.createClass({ className={classnames(thClassname, 'rt-pivot-header')} style={_.prefixAll({ flex: `${columnPercentage} 0 auto`, - width: `${pivotColumn.minWidth}px` + width: `${pivotColumn.minWidth}px`, + maxWidth: `${pivotColumn.maxWidth}px` })} /> ) : SubComponent ? ( @@ -333,7 +334,10 @@ export default React.createClass({ className={classnames(thClassname, column.headerClassName)} style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({ flex: `${column.columns.length * columnPercentage} 0 auto`, - width: `${_.sum(column.columns.map(d => d.minWidth))}px` + width: `${_.sum(column.columns.map(d => { + return d.maxWidth < d.minWidth ? d.maxWidth : d.minWidth + }))}px`, + maxWidth: `${_.sum(column.columns.map(d => d.maxWidth))}px` }))} > {typeof column.header === 'function' ? ( @@ -372,7 +376,8 @@ export default React.createClass({ )} style={_.prefixAll({ flex: `${columnPercentage} 0 auto`, - width: `${pivotColumn.minWidth}px` + width: `${pivotColumn.minWidth}px`, + maxWidth: `${pivotColumn.maxWidth}px` })} toggleSort={(e) => { pivotColumn.sortable && this.sortColumn(pivotColumn.pivotColumns, e.shiftKey) @@ -425,7 +430,8 @@ export default React.createClass({ )} style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({ flex: `${columnPercentage} 0 auto`, - width: `${column.minWidth}px` + width: `${column.minWidth}px`, + maxWidth: `${column.maxWidth}px` }))} toggleSort={(e) => { column.sortable && this.sortColumn(column, e.shiftKey) @@ -468,7 +474,8 @@ export default React.createClass({ style={_.prefixAll({ paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`, flex: `${pivotColumn ? columnPercentage : 0} 0 auto`, - width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px` + width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`, + maxWidth: pivotColumn && `${pivotColumn.maxWidth}px` })} onClick={(e) => { if (onExpandRow) { @@ -515,7 +522,8 @@ export default React.createClass({ className={classnames(column.className, {hidden: !show})} style={Object.assign({}, tdStyle, column.style, _.prefixAll({ flex: `${columnPercentage} 0 auto`, - width: `${column.minWidth}px` + width: `${column.minWidth}px`, + maxWidth: `${column.maxWidth}px` }))} > {typeof Cell === 'function' ? ( @@ -870,6 +878,11 @@ export default React.createClass({ dcol.accessor = d => undefined } + // Ensure minWidth is not greater than maxWidth if set + if (dcol.maxWidth < dcol.minWidth) { + dcol.minWidth = dcol.maxWidth + } + return dcol }, getMinRows () { diff --git a/src/index.styl b/src/index.styl index 75b3f79..dd32ec3 100644 --- a/src/index.styl +++ b/src/index.styl @@ -1,5 +1,3 @@ -@import 'nib' - $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940) $easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275) $expandSize = 7px diff --git a/stories/MaxWidths.js b/stories/MaxWidths.js new file mode 100644 index 0000000..982ec90 --- /dev/null +++ b/stories/MaxWidths.js @@ -0,0 +1,91 @@ +import React from 'react' +import _ from 'lodash' +import namor from 'namor' + +import CodeHighlight from './components/codeHighlight' +import ReactTable from '../src/index' + +export default () => { + const data = _.map(_.range(5553), d => { + return { + firstName: namor.generate({ words: 1, numLen: 0 }), + lastName: namor.generate({ words: 1, numLen: 0 }), + age: Math.floor(Math.random() * 30) + } + }) + + const columns = [{ + header: 'Name', + columns: [{ + header: 'First Name', + accessor: 'firstName', + maxWidth: 200 + }, { + header: 'Last Name', + id: 'lastName', + accessor: d => d.lastName, + maxWidth: 400 + }] + }, { + header: 'Info', + columns: [{ + header: 'Age', + accessor: 'age', + maxWidth: 60 + }] + }] + + return ( +
+
+ +
+
+
+ Tip: Hold shift when sorting to multi-sort! +
+ {() => getCode()} +
+ ) +} + +function getCode () { + return ` +import ReactTable from 'react-table' + +const columns = [{ + header: 'Name', + columns: [{ + header: 'First Name', + accessor: 'firstName', + maxWidth: 200 + }, { + header: 'Last Name', + id: 'lastName', + accessor: d => d.lastName, + maxWidth: 400 + }] +}, { + header: 'Info', + columns: [{ + header: 'Age', + accessor: 'age', + maxWidth: 60 + }] +}] + +return ( + +) + ` +} diff --git a/yarn.lock b/yarn.lock index 50bfc8e..b2cf738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -344,7 +344,15 @@ asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" -autoprefixer@^6.3.1, autoprefixer@^6.3.7: +autoprefixer-stylus: + version "0.13.0" + resolved "https://registry.yarnpkg.com/autoprefixer-stylus/-/autoprefixer-stylus-0.13.0.tgz#cc2a864e121fad691421c82d9f3e4328137b7df4" + dependencies: + autoprefixer "6.6.1" + multi-stage-sourcemap "0.2.1" + postcss "5.2.8" + +autoprefixer@^6.3.1, autoprefixer@^6.3.7, autoprefixer@6.6.1: version "6.6.1" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.1.tgz#11a4077abb4b313253ec2f6e1adb91ad84253519" dependencies: @@ -3767,6 +3775,12 @@ ms@0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765" +multi-stage-sourcemap@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/multi-stage-sourcemap/-/multi-stage-sourcemap-0.2.1.tgz#b09fc8586eaa17f81d575c4ad02e0f7a3f6b1105" + dependencies: + source-map "^0.1.34" + mute-stream@0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0" @@ -4469,6 +4483,15 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.1.2" +postcss@5.2.8: + version "5.2.8" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.8.tgz#05720c49df23c79bda51fd01daeb1e9222e94390" + dependencies: + chalk "^1.1.3" + js-base64 "^2.1.9" + source-map "^0.5.6" + supports-color "^3.1.2" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -5115,6 +5138,12 @@ source-map-support@^0.4.2: dependencies: source-map "^0.5.3" +source-map@^0.1.34, source-map@0.1.x: + version "0.1.43" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" + dependencies: + amdefine ">=0.0.4" + source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" @@ -5131,12 +5160,6 @@ source-map@~0.4.1, source-map@0.4.x: dependencies: amdefine ">=0.0.4" -source-map@0.1.x: - version "0.1.43" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" - dependencies: - amdefine ">=0.0.4" - spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"