Paul.diaz/make spreadsheet component able to handle selection column

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 (
                       <SpreadsheetCell
                         key={key}
                         id={key}
                         cell={cell}
                         styles={props.css?.tableCell}
-                        canEdit={canEdit}
+                        canEdit={!columnSelection && canEdit}
                         isSelected={selectedCell === key}
                         isFocused={focusedCell === key}
-                        onSelectCell={(evt, id) => 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}

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')}
     </StyledTableCell>
   )
 }

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 () {
       <div>
         <Spreadsheet
           columns={[
+            {
+              id: 'Selection',
+              Cell: function RowSelection ({ row }) {
+                const { indeterminate, ...rest } = row.getToggleRowSelectedProps()
+                return <input
+                  type="checkbox"
+                  className="form-checkbox"
+                  {...rest}
+                />
+              },
+              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}