Skip to content
Permalink
Browse files

Fix column resizing

  • Loading branch information
tannerlinsley committed Dec 2, 2019
1 parent f9a6273 commit 12b5d05ba286ddb6481ebf359da958661756b40b
Showing with 36 additions and 31 deletions.
  1. +7 −7 .size-snapshot.json
  2. +16 −17 examples/column-resizing/src/App.js
  3. +13 −7 src/plugin-hooks/useResizeColumns.js
@@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 96601,
"minified": 46726,
"gzipped": 12271
"bundled": 96769,
"minified": 46778,
"gzipped": 12295
},
"dist/index.es.js": {
"bundled": 96036,
"minified": 46234,
"gzipped": 12155,
"bundled": 96204,
"minified": 46286,
"gzipped": 12179,
"treeshaked": {
"rollup": {
"code": 78,
"import_statements": 21
},
"webpack": {
"code": 11109
"code": 11136
}
}
}
@@ -59,9 +59,9 @@ const Styles = styled.div`
function Table({ columns, data }) {
const defaultColumn = React.useMemo(
() => ({
minWidth: 20,
minWidth: 30,
width: 150,
maxWidth: 500,
maxWidth: 400,
}),
[]
)
@@ -102,21 +102,20 @@ function Table({ columns, data }) {
</div>

<div {...getTableBodyProps()}>
{rows.map(
(row, i) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map(cell => {
return (
<div {...cell.getCellProps()} className="td">
{cell.render('Cell')}
</div>
)
})}
</div>
)}
)}
{rows.map((row, i) => {
prepareRow(row)
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map(cell => {
return (
<div {...cell.getCellProps()} className="td">
{cell.render('Cell')}
</div>
)
})}
</div>
)
})}
</div>
</div>
)
@@ -30,29 +30,34 @@ reducerHandlers[pluginName] = (state, action) => {
}

if (action.type === actions.columnStartResizing) {
const { startX, columnId, headerIdWidths } = action
const { clientX, columnId, columnWidth, headerIdWidths } = action

return {
...state,
columnResizing: {
...state.columnResizing,
startX,
startX: clientX,
headerIdWidths,
columnWidth,
isResizingColumn: columnId,
},
}
}

if (action.type === actions.columnResizing) {
const { clientX } = action
const { startX, headerIdWidths } = state.columnResizing
const { startX, columnWidth, headerIdWidths } = state.columnResizing

const deltaX = clientX - startX
const percentageDeltaX = deltaX / headerIdWidths.length
const percentageDeltaX = deltaX / columnWidth

const newColumnWidths = {}
headerIdWidths.forEach(([headerId, headerWidth], index) => {
newColumnWidths[headerId] = Math.max(headerWidth + percentageDeltaX, 0)

headerIdWidths.forEach(([headerId, headerWidth]) => {
newColumnWidths[headerId] = Math.max(
headerWidth + headerWidth * percentageDeltaX,
0
)
})

return {
@@ -61,7 +66,7 @@ reducerHandlers[pluginName] = (state, action) => {
...state.columnResizing,
columnWidths: {
...state.columnResizing.columnWidths,
...action.columnWidths,
...newColumnWidths,
},
},
}
@@ -129,6 +134,7 @@ const useInstanceBeforeDimensions = instance => {
dispatch({
type: actions.columnStartResizing,
columnId: header.id,
columnWidth: header.totalWidth,
headerIdWidths,
clientX,
})

0 comments on commit 12b5d05

Please sign in to comment.
You can’t perform that action at this time.