feat: Allow to hide checkboxes in VirtualizedTable

With `withCheckbox={false}` attribute added to VirtualizedTable,
checkboxes are hidden and rows become clickable for selection.

Author: doubleface

react/Table/Readme.md

@@ -73,7 +73,7 @@ const columns = [
   }
 ]
 
-const initialVariants = [{ grouped: false }]
+const initialVariants = [{ grouped: false, withCheckbox: true }, { grouped: false, withCheckbox: false }]
 
 // Very basic usage only works when Dessert is sorted "asc"
 // Ideally you have to create a logic to create groups with sorted data
@@ -98,6 +98,7 @@ const ExampleTable = ({ variant, ...props }) => {
         onSelect={(row, event, index) => toggleSelectedItem(row.id)}
         onSelectAll={rows => toggleSelectAllItems(rows.map(item => item.id))}
         onSortChange={onSortChange}
+        withCheckbox={variant.withCheckbox}
         componentsProps={{
           rowContent: {
             onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) },

react/Table/Virtualized/FixedHeaderContent.jsx

@@ -35,18 +35,20 @@ const FixedHeaderContent = ({
 
   return (
     <TableRow>
-      <TableCell align="center" padding="checkbox">
-        <Checkbox
-          className={cx('virtualizedCheckbox', {
-            checked: selectedCount > 0
-          })}
-          indeterminate={selectedCount > 0 && selectedCount < rowCount}
-          checked={rowCount > 0 && selectedCount === rowCount}
-          inputProps={{ 'aria-label': 'select all' }}
-          size="small"
-          onChange={onSelectAllClick}
-        />
-      </TableCell>
+      {context.withCheckbox && (
+        <TableCell align="center" padding="checkbox">
+          <Checkbox
+            className={cx('virtualizedCheckbox', {
+              checked: selectedCount > 0
+            })}
+            indeterminate={selectedCount > 0 && selectedCount < rowCount}
+            checked={rowCount > 0 && selectedCount === rowCount}
+            inputProps={{ 'aria-label': 'select all' }}
+            size="small"
+            onChange={onSelectAllClick}
+          />
+        </TableCell>
+      )}
       {columns.map(column => (
         <TableHeadCell
           key={column.id}

react/Table/Virtualized/RowContent.jsx

@@ -19,20 +19,22 @@ const RowContent = ({
 
   return (
     <>
-      <TableCell align="center" padding="checkbox">
-        <Checkbox
-          className={cx('virtualizedCheckbox', {
-            visible: selectedCount > 0,
-            checked: context.isSelectedItem(row)
-          })}
-          checked={context.isSelectedItem(row)}
-          inputProps={{
-            'aria-labelledby': `enhanced-table-checkbox-${index}`
-          }}
-          size="small"
-          onClick={event => onSelectClick(row, event, index)}
-        />
-      </TableCell>
+      {context.withCheckbox && (
+        <TableCell align="center" padding="checkbox">
+          <Checkbox
+            className={cx('virtualizedCheckbox', {
+              visible: selectedCount > 0,
+              checked: context.isSelectedItem(row)
+            })}
+            checked={context.isSelectedItem(row)}
+            inputProps={{
+              'aria-labelledby': `enhanced-table-checkbox-${index}`
+            }}
+            size="small"
+            onClick={event => onSelectClick(row, event, index)}
+          />
+        </TableCell>
+      )}
       {columns.map(column => (
         <Cell
           key={column.id}

react/Table/Virtualized/TableRow.jsx

@@ -7,12 +7,20 @@ const TableRow = ({ item, context, className, ...props }) => {
   const _item = item || context.data[props['data-item-index']]
   const isSelected = context.isSelectedItem(_item)
 
+  const handleClick = () => {
+    if (!context.withCheckbox && _item) {
+      const index = props['data-item-index']
+      context.onSelect?.(_item, null, index)
+    }
+  }
+
   return (
     <TableRowClassic
       {...props}
       className={cx(className, 'virtualized')}
       selected={isSelected}
       hover
+      onClick={!context.withCheckbox ? handleClick : props.onClick}
     />
   )
 }

react/Table/Virtualized/index.jsx

@@ -25,6 +25,7 @@ const VirtualizedTable = forwardRef(
       components,
       onSortChange,
       isNewItem,
+      withCheckbox,
       ...props
     },
     ref
@@ -45,7 +46,9 @@ const VirtualizedTable = forwardRef(
       ...(isGroupedTable && { data }), // we use directly `data` prop if no groupCounts
       isSelectedItem,
       selectedItems,
-      isNewItem
+      isNewItem,
+      withCheckbox,
+      onSelect
     }
 
     const handleSort = property => {
@@ -117,7 +120,8 @@ VirtualizedTable.defaultProps = {
   selectedItems: [],
   isSelectedItem: () => {},
   onSelect: () => {},
-  onSelectAll: () => {}
+  onSelectAll: () => {},
+  withCheckbox: true
 }
 
 VirtualizedTable.propTypes = {
@@ -145,7 +149,9 @@ VirtualizedTable.propTypes = {
   /** Callback called after the sort */
   onSortChange: PropTypes.func,
   /** Function to determine if a row is new */
-  isNewItem: PropTypes.func
+  isNewItem: PropTypes.func,
+  /** Whether to show checkboxes. When false, rows become clickable for selection */
+  withCheckbox: PropTypes.bool
 }
 
 export default VirtualizedTable