@propellerads/table 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/table",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "repository": "https://github.com/propellerads/ui-components",
   "author": "i.pasyuk@propellerads.net",
   "license": "MIT",
@@ -41,5 +41,5 @@
     "@types/react-table": "^7.7.12",
     "react-table": "^7.8.0"
   },
-  "gitHead": "e62c80448d64abc7d60fb748c8819985d3802b02"
+  "gitHead": "8ef053e09af9c826817843883c68274027b3f72d"
 }

package/src/index.tsx

@@ -29,7 +29,6 @@ import {
   StandardCell,
   ColumnWithSort,
   TableHooksInstanceProps,
-  SelectableRowInstanceProps,
   TableOptionsProps,
   SelectableRow,
   DefaultObject,
@@ -63,6 +62,10 @@ import {
   EmptyStateCell,
 } from './style';
 
+const isEnableRowSelectDefault: () => boolean = () => true;
+const selectColumnPropsDefault = {};
+const getRowPrePropsDefault: () => DefaultObject = () => ({});
+
 export const defaultProps = {
   hasDefaultPagination: false,
   isLoading: false,
@@ -74,7 +77,9 @@ export const defaultProps = {
   showLoadingState: false,
   initialState: {},
   LoadingCellComponent: EmptyStateCell,
-  getRowPreProps: () => ({}),
+  getRowPreProps: getRowPrePropsDefault,
+  isEnableRowSelect: isEnableRowSelectDefault,
+  selectColumnProps: selectColumnPropsDefault,
   noDataMessage: '',
 };
 
@@ -143,6 +148,8 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     showLoadingState,
     noDataMessage,
     rowSubComponent,
+    isEnableRowSelect,
+    selectColumnProps,
   } = props;
 
   const memoColumns = useMemo(() => columns, [columns]);
@@ -203,17 +210,21 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     const newColumn = {
       id: 'selection',
       disableSortBy: true,
-      Header: (instance: SelectableRowInstanceProps) => {
+      Header: (instance: TableHooksInstanceProps & { toggleAllPageRowsSelected: () => void}) => {
         const {
-          getToggleAllRowsSelectedProps,
-          toggleAllRowsSelected,
+          getToggleAllPageRowsSelectedProps,
+          toggleAllPageRowsSelected,
+          page,
         } = instance;
 
+        const isDisabledAllRows = page.map(({original}) => original).filter(isEnableRowSelect).length === 0;
+
         return (
           <Checkbox
             elementId="all"
-            onChange={toggleAllRowsSelected}
-            isChecked={getToggleAllRowsSelectedProps().checked}
+            onChange={toggleAllPageRowsSelected}
+            isChecked={getToggleAllPageRowsSelectedProps().checked}
+            isDisabled={isDisabledAllRows}
           />
         );
       },
@@ -226,15 +237,18 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
         } = row;
 
         const elementId = Number.isInteger(original.id) ? original.id : id;
+        const isEnabled = isEnableRowSelect(row.original);
 
         return (
           <Checkbox
             elementId={elementId}
             onChange={toggleRowSelected}
-            isChecked={getToggleRowSelectedProps().checked}
+            isDisabled={!isEnabled}
+            isChecked={isEnabled && getToggleRowSelectedProps().checked}
           />
         );
       },
+      ...selectColumnProps,
     };
 
     hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [
@@ -294,7 +308,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
   useEffect(() => {
     if (hasSelectedRowsAbility) {
       onSelectRowsChange?.(
-        selectedFlatRows?.map((row: StandardRow) => row.original),
+        selectedFlatRows?.map((row: StandardRow) => row.original).filter(isEnableRowSelect),
       );
     }
   }, [selectedRowIds]);
@@ -455,8 +469,8 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
                 if (isDelimiterTd) {
                   return (
-                    <>
-                      <TRGroup key={`group_${row.index}`}>
+                    <React.Fragment key={`group_${row.index}`}>
+                      <TRGroup>
                         <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
                           <TD
                             colSpan={visibleColumns.length}
@@ -469,13 +483,13 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                         </TR>
                       </TRGroup>
                       {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
-                    </>
+                    </React.Fragment>
                   );
                 }
 
                 return (
-                  <>
-                    <TRGroup key={`group_${row.index}`}>
+                  <React.Fragment key={`group_${row.index}`}>
+                    <TRGroup>
                       <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
                         {row.cells.map((cell: StandardCell) => (
                           <TD
@@ -489,7 +503,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                       </TR>
                     </TRGroup>
                     {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
-                  </>
+                  </React.Fragment>
                 );
               })}
             </TBody>

package/src/types.tsx

@@ -85,7 +85,8 @@ export type TableProps = {
     showLoadingState?: boolean,
     LoadingCellComponent?: FunctionComponent<DefaultObject>,
     noDataMessage?: string | ReactElement
-    rowSubComponent?: (row: StandardRow) => ReactElement
+    rowSubComponent?: (row: StandardRow) => ReactElement,
+    isEnableRowSelect?: (original: DefaultObject) => boolean,
 }
 
 export type TableOptions = {