diff --git a/examples/full-width-resizable-table/package.json b/examples/full-width-resizable-table/package.json index a5210d1..77fbb6d 100755 --- a/examples/full-width-resizable-table/package.json +++ b/examples/full-width-resizable-table/package.json @@ -10,7 +10,7 @@ "namor": "^1.1.2", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "3.0.1", + "react-scripts": "3.3.0", "react-table": "latest", "styled-components": "^4.3.2" }, diff --git a/examples/full-width-resizable-table/src/App.js b/examples/full-width-resizable-table/src/App.js index c3a4b00..2801afb 100755 --- a/examples/full-width-resizable-table/src/App.js +++ b/examples/full-width-resizable-table/src/App.js @@ -1,6 +1,11 @@ import React from 'react' import styled from 'styled-components' -import { useTable, useResizeColumns, useFlexLayout } from 'react-table' +import { + useTable, + useResizeColumns, + useFlexLayout, + useRowSelect, +} from 'react-table' import makeData from './makeData' @@ -35,13 +40,13 @@ const Styles = styled.div` border-bottom: 0; } } + border-bottom: 1px solid black; } .th, .td { margin: 0; padding: 0.5rem; - border-bottom: 1px solid black; border-right: 1px solid black; ${'' /* In this example we use an absolutely position resizer, @@ -53,12 +58,11 @@ const Styles = styled.div` } .resizer { - display: inline-block; + right: -5px; background: blue; width: 10px; height: 100%; position: absolute; - right: 0; top: 0; z-index: 1; ${'' /* prevents from scrolling while dragging on touch devices */} @@ -69,9 +73,51 @@ const Styles = styled.div` } } } + + .th { + &:last-of-type { + .resizer { + ${'' /* note that the 15 is the scroll width and if also referenced in the getHeaderGroupProps for the header row below */} + ${'' /* todo: resolve this value dynamicaly from element.scrollWidth to account for OS/Browser differences */} + right: -15px; + } + } + } } ` +const headerProps = (props, { column }) => getStyles(props, column.align) + +const cellProps = (props, { cell }) => getStyles(props, cell.column.align) + +const getStyles = (props, align = 'left') => [ + props, + { + style: { + justifyContent: align === 'right' ? 'flex-end' : 'flex-start', + alignItems: 'flex-start', + display: 'flex', + }, + }, +] + +const IndeterminateCheckbox = React.forwardRef( + ({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef() + const resolvedRef = ref || defaultRef + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate + }, [resolvedRef, indeterminate]) + + return ( + <> + + > + ) + } +) + function Table({ columns, data }) { const defaultColumn = React.useMemo( () => ({ @@ -96,28 +142,69 @@ function Table({ columns, data }) { defaultColumn, }, useResizeColumns, - useFlexLayout + useFlexLayout, + useRowSelect, + hooks => { + hooks.flatColumns.push(columns => [ + // Let's make a column for selection + { + id: 'selection', + disableResizing: true, + minWidth: 35, + width: 35, + maxWidth: 35, + // The header can use the table's getToggleAllRowsSelectedProps method + // to render a checkbox + Header: ({ getToggleAllRowsSelectedProps }) => ( +