diff --git a/examples/full-width-resizable-table/src/App.js b/examples/full-width-resizable-table/src/App.js index e00f118..598e7d3 100755 --- a/examples/full-width-resizable-table/src/App.js +++ b/examples/full-width-resizable-table/src/App.js @@ -11,13 +11,12 @@ import makeData from './makeData' const Styles = styled.div` padding: 1rem; + ${'' /* These styles are suggested for the table fill all available space in its containing element */} + display: block; + ${'' /* These styles are required for a horizontaly scrollable table overflow */} + overflow: auto; .table { - ${'' /* These styles are suggested for the table fill all available space in its containing element */} - display: block; - ${'' /* These styles are required for a horizontaly scrollable table overflow */} - overflow: auto; - border-spacing: 0; border: 1px solid black; @@ -119,13 +118,7 @@ function Table({ columns, data }) { [] ) - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow, - } = useTable( + const { getTableProps, headerGroups, rows, prepareRow } = useTable( { columns, data, @@ -195,8 +188,8 @@ function Table({ columns, data }) { ))} -
- {rows.map((row, i) => { +
+ {rows.map(row => { prepareRow(row) return (
diff --git a/src/plugin-hooks/useFlexLayout.js b/src/plugin-hooks/useFlexLayout.js index e178df8..2b1643b 100644 --- a/src/plugin-hooks/useFlexLayout.js +++ b/src/plugin-hooks/useFlexLayout.js @@ -1,5 +1,5 @@ export function useFlexLayout(hooks) { - hooks.getTableBodyProps.push(getTableBodyProps) + hooks.getTableProps.push(getTableProps) hooks.getRowProps.push(getRowStyles) hooks.getHeaderGroupProps.push(getRowStyles) hooks.getHeaderProps.push(getHeaderProps) @@ -8,7 +8,7 @@ export function useFlexLayout(hooks) { useFlexLayout.pluginName = 'useFlexLayout' -const getTableBodyProps = (props, { instance }) => [ +const getTableProps = (props, { instance }) => [ props, { style: { @@ -33,7 +33,9 @@ const getHeaderProps = (props, { column }) => [ { style: { boxSizing: 'border-box', - flex: column.totalFlexWidth ? `${column.totalFlexWidth} 0 auto` : undefined, + flex: column.totalFlexWidth + ? `${column.totalFlexWidth} 0 auto` + : undefined, minWidth: `${column.totalMinWidth}px`, width: `${column.totalWidth}px`, },