vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-08-11 20:40:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

column.maxWidth support and fixed css autoprefixer warnings

Browse Source 
Fixes #34
This commit is contained in:
Tanner Linsley
2017-01-23 10:16:34 -07:00
parent c0098ebc2c
commit c1004ee9e9
7 changed files with 145 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/config.js
+1 -1
View File
@@ -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)
README.md
+2 -1
View File
@@ -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
package.json
+2 -1
View File
@@ -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",
src/index.js
+19 -6
View File
@@ -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 () {
src/index.styl
-2
View File
@@ -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
stories/MaxWidths.js
+91
View File
@@ -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 (
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
data={data}
columns={columns}
defaultPageSize={10}
/>
</div>
<div style={{textAlign: 'center'}}>
<br />
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>
<CodeHighlight>{() => getCode()}</CodeHighlight>
</div>
)
}
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 (
<ReactTable
className='-striped -highlight'
data={data}
columns={columns}
defaultPageSize={10}
/>
)
`
}
yarn.lock
+30 -7
View File
@@ -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"