diff --git a/packages/swag-sheet/components/Spreadsheet.js b/packages/swag-sheet/components/Spreadsheet.js index be3ca000..0934c4c9 100644 --- a/packages/swag-sheet/components/Spreadsheet.js +++ b/packages/swag-sheet/components/Spreadsheet.js @@ -1,6 +1,6 @@ import React from 'react' import { styled } from '@stitches/react' -import { useTable, useFilters, useSortBy, usePagination } from 'react-table' +import { useTable, useFilters, useSortBy, usePagination, useRowSelect } from 'react-table' import { LoadingBar, Button, StyledDiv } from '@generates/swag' import { merge } from '@generates/merger' import StyledTable from './styled/StyledTable.js' @@ -125,6 +125,7 @@ export default function Spreadsheet (props) { rows, prepareRow, setAllFilters, + selectedFlatRows, state: { pageIndex, pageSize, sortBy, filters } } = useTable( merge( @@ -137,10 +138,11 @@ export default function Spreadsheet (props) { ), useFilters, useSortBy, - usePagination + usePagination, + useRowSelect ) - const { onPageIndex, onPageSize, onSortBy, onFilter } = props + const { onPageIndex, onPageSize, onSortBy, onFilter, onRowIsSelected } = props React.useEffect( () => onPageIndex && !initialRender.current && onPageIndex(pageIndex), @@ -174,6 +176,15 @@ export default function Spreadsheet (props) { ] ) + React.useEffect( + () => onRowIsSelected && !initialRender.current && + onRowIsSelected(selectedFlatRows.map(row => row.original)), + [ + onRowIsSelected, + selectedFlatRows + ] + ) + React.useEffect(() => (initialRender.current = false), []) React.useEffect( @@ -257,18 +268,19 @@ export default function Spreadsheet (props) { > {row.cells.map(cell => { const { key, ...rest } = cell.getCellProps() + const columnSelection = cell.column.id === 'Selection' return ( setSelectedCell(id)} - onFocusCell={(evt, id) => setFocusedCell(id)} - onBlur={onBlur} + onSelectCell={(evt, id) => !columnSelection && setSelectedCell(id)} + onFocusCell={(evt, id) => !columnSelection && setFocusedCell(id)} + onBlur={(evt) => !columnSelection && onBlur(evt)} onEscape={onEscape} onTab={onTab} onShiftTab={onShiftTab} diff --git a/packages/swag-sheet/components/SpreadsheetCell.js b/packages/swag-sheet/components/SpreadsheetCell.js index 8a544a96..fb99a1cf 100644 --- a/packages/swag-sheet/components/SpreadsheetCell.js +++ b/packages/swag-sheet/components/SpreadsheetCell.js @@ -72,7 +72,7 @@ export default function SpreadsheetCell (props) { onBlur={evt => props.onBlur(evt, ctx)} {...props.cell.getCellProps()} > - {value} + {value || props.cell.render('Cell')} ) } diff --git a/packages/swag-sheet/pages/add.js b/packages/swag-sheet/pages/add.js index fe8e44fd..dab04adb 100644 --- a/packages/swag-sheet/pages/add.js +++ b/packages/swag-sheet/pages/add.js @@ -32,6 +32,10 @@ export default function AddPage () { sortBy => console.log('Sort by', sortBy), [] ) + const onRowIsSelected = React.useCallback( + rows => console.log('Selected row', rows), + [] + ) function onSaveAddedRows (input) { return new Promise(resolve => { @@ -62,6 +66,18 @@ export default function AddPage () {
+ }, + disableSortBy: false + }, { id: 'Driver Name', disableSortBy: false @@ -79,6 +95,7 @@ export default function AddPage () { onSortBy={onSortBy} onSaveAddedRows={onSaveAddedRows} onUpdateCell={onUpdateCell} + onRowIsSelected={onRowIsSelected} data={data} showLoading={true} isLoading={isLoading}