@propellerads/table 4.3.2 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/table",
-  "version": "4.3.2",
+  "version": "4.5.1",
   "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": "258e659f14a8f803795b18b0f2771c04e0a7d2e6"
+  "gitHead": "f5580dc4afc1f8c4d92868e854dd3d659d64021b"
 }

package/src/index.tsx

@@ -1,20 +1,18 @@
 import React, {
-  FunctionComponent,
-  useEffect,
-  useMemo,
-  useRef,
+  FunctionComponent, useEffect, useMemo, useRef,
 } from 'react';
 import {
   useSortBy,
   useTable,
   useRowSelect,
   usePagination,
+  useExpanded,
   useFlexLayout,
   Column,
 } from 'react-table';
 
 import {
-  ArrowDownFull, ArrowUp, COLOR, SIZE,
+  ArrowDown, ArrowUp, COLOR, SIZE,
 } from '@propellerads/icon';
 import Checkbox from '@propellerads/input-checkbox';
 
@@ -74,6 +72,7 @@ export const defaultProps = {
   parentElementId: 'parent-element',
   tableContentId: '',
   showLoadingState: false,
+  initialState: {},
   LoadingCellComponent: EmptyStateCell,
   getRowPreProps: () => ({}),
   noDataMessage: '',
@@ -97,10 +96,7 @@ function getHeadContent(column: ColumnWithSort) {
     return (
       <HeadCell>
         {column.render('Header')}
-        <ArrowDownFull
-          size={SIZE.SMALL}
-          color={COLOR.GRAY_DARK}
-        />
+        <ArrowDown size={SIZE.SMALL} color={COLOR.GRAY_DARK} />
       </HeadCell>
     );
   }
@@ -109,10 +105,7 @@ function getHeadContent(column: ColumnWithSort) {
     return (
       <HeadCell>
         {column.render('Header')}
-        <ArrowUp
-          size={SIZE.SMALL}
-          color={COLOR.GRAY_DARK}
-        />
+        <ArrowUp size={SIZE.SMALL} color={COLOR.GRAY_DARK} />
       </HeadCell>
     );
   }
@@ -149,21 +142,30 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     getFooterGroupProps,
     showLoadingState,
     noDataMessage,
+    rowSubComponent,
   } = props;
 
   const memoColumns = useMemo(() => columns, [columns]);
 
   const {loadingColumns, loadingData} = useLoadingState(
-    showLoadingState, isLoading, controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE, memoColumns, LoadingCellComponent,
+    showLoadingState,
+    isLoading,
+    controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE,
+    memoColumns,
+    LoadingCellComponent,
   );
 
   const showLoading = showLoadingState && isLoading;
   const hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);
   const hasManualSortBy = onSortedChange && isFunction(onSortedChange);
-  const hasControlledPagination = fetchData && controlledPagination && Object.keys(controlledPagination).length > 0;
+  const hasControlledPagination = fetchData
+    && controlledPagination
+    && Object.keys(controlledPagination).length > 0;
 
   const options: TableOptionsProps = {
-    columns: showLoading ? (loadingColumns as Column<DefaultObject>[]) : memoColumns,
+    columns: showLoading
+      ? (loadingColumns as Column<DefaultObject>[])
+      : memoColumns,
     data: showLoading ? loadingData : data,
     initialState,
     disableSortRemove,
@@ -177,7 +179,9 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   if (hasControlledPagination) {
     if (typeof controlledPagination?.pageCount === 'undefined') {
-      throw new Error('You have to pass pageCount in controlledPagination data');
+      throw new Error(
+        'You have to pass pageCount in controlledPagination data',
+      );
     }
 
     options.initialState = {
@@ -200,7 +204,10 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
       id: 'selection',
       disableSortBy: true,
       Header: (instance: SelectableRowInstanceProps) => {
-        const {getToggleAllRowsSelectedProps, toggleAllRowsSelected} = instance;
+        const {
+          getToggleAllRowsSelectedProps,
+          toggleAllRowsSelected,
+        } = instance;
 
         return (
           <Checkbox
@@ -230,10 +237,10 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
       },
     };
 
-    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => ([
+    hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [
       newColumn,
       ...tableColumns,
-    ]));
+    ]);
   };
 
   const {
@@ -249,6 +256,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     options,
     useFlexLayout,
     useSortBy,
+    useExpanded,
     usePagination,
     useRowSelect,
     useSelect,
@@ -285,15 +293,19 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
   useEffect(() => {
     if (hasSelectedRowsAbility) {
-      onSelectRowsChange?.(selectedFlatRows?.map((row: StandardRow) => row.original));
+      onSelectRowsChange?.(
+        selectedFlatRows?.map((row: StandardRow) => row.original),
+      );
     }
   }, [selectedRowIds]);
 
   let pagination: JSX.Element | null = null;
 
   if (hasDefaultPagination && hasControlledPagination) {
-    // eslint-disable-next-line max-len
-    throw new Error('You have to pass either hasDefaultPagination true boolean prop or pass fetchData callback and controlledPagination data');
+    throw new Error(
+      'You have to pass either hasDefaultPagination true boolean prop or '
+        + 'pass fetchData callback and controlledPagination data',
+    );
   }
 
   if (hasControlledPagination || hasDefaultPagination) {
@@ -347,9 +359,7 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
       }
     }
 
-    pagination = (
-      <PaginationComponent {...paginationData} />
-    );
+    pagination = <PaginationComponent {...paginationData} />;
   }
 
   function extendSortByProps(column: ColumnWithSort) {
@@ -360,39 +370,55 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     if (hasManualSortBy && column.canSort && headerProps) {
       headerProps.onClick = () => {
         onSortedChange?.(column.id, Boolean(column.isSortedDesc));
-        setSortBy([{
-          id: column.id,
-          desc: !column.isSortedDesc,
-        }]);
+        setSortBy([
+          {
+            id: column.id,
+            desc: !column.isSortedDesc,
+          },
+        ]);
       };
     }
 
     return headerProps;
   }
 
-  const tBodyTr = (hasControlledPagination || hasDefaultPagination) ? page : rows;
+  const tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;
 
   return (
     <TableRoot className="table-root">
-      <TableLoading isLoading={!showLoadingState && isLoading} className="table-loading">
-        <TableLoadingInner>
-          {loadingMessage}
-        </TableLoadingInner>
+      <TableLoading
+        isLoading={!showLoadingState && isLoading}
+        className="table-loading"
+      >
+        <TableLoadingInner>{loadingMessage}</TableLoadingInner>
       </TableLoading>
       <TableWrapper ref={tableWrapperRef} className="table-wrapper">
         <TableContent id={tableContentId} className="table-content">
-          <TableCore {..._getTableProps(getTableBodyProps(getTableProps))} ref={tableRef}>
+          <TableCore
+            {..._getTableProps(getTableBodyProps(getTableProps))}
+            ref={tableRef}
+          >
             <THead className="table-head">
               {headerGroups.map((headerGroup) => (
-                <TR {...headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))}>
+                <TR
+                  {...headerGroup.getHeaderGroupProps(
+                    getTableElementProps(getHeaderGroupProps),
+                  )}
+                >
                   {headerGroup.headers.map((column) => {
-                    const headerProps = extendSortByProps(column) as DefaultObject;
+                    const headerProps = extendSortByProps(
+                      column,
+                    ) as DefaultObject;
 
                     return (
                       <TH
-                        {...column.getHeaderProps(getTableElementInternalProps(
-                          headerProps, getHeaderProps, mainCellGetter,
-                        ))}
+                        {...column.getHeaderProps(
+                          getTableElementInternalProps(
+                            headerProps,
+                            getHeaderProps,
+                            mainCellGetter,
+                          ),
+                        )}
                       >
                         {getHeadContent(column)}
                       </TH>
@@ -404,9 +430,17 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
             {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
               <TFoot className="table-footer-top">
                 {footerGroups.map((group) => (
-                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
+                  <TR
+                    {...group.getFooterGroupProps(
+                      getTableElementProps(getFooterGroupProps),
+                    )}
+                  >
                     {group.headers.map((column) => (
-                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
+                      <TD
+                        {...column.getFooterProps(
+                          getTableElementProps(getFooterProps, mainCellGetter),
+                        )}
+                      >
                         {column.render('Footer')}
                       </TD>
                     ))}
@@ -421,38 +455,58 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
                 if (isDelimiterTd) {
                   return (
-                    <TRGroup key={`group_${row.index}`}>
-                      <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
-                        <TD
-                          colSpan={visibleColumns.length}
-                          {...row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))}
-                        >
-                          <strong>{row.cells[0].render('Cell')}</strong>
-                        </TD>
-                      </TR>
-                    </TRGroup>
+                    <React.Fragment key={`group_${row.index}`}>
+                      <TRGroup>
+                        <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
+                          <TD
+                            colSpan={visibleColumns.length}
+                            {...row.cells[0].getCellProps(
+                              getTableCellProps(getCellProps, cellGetter),
+                            )}
+                          >
+                            <strong>{row.cells[0].render('Cell')}</strong>
+                          </TD>
+                        </TR>
+                      </TRGroup>
+                      {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
+                    </React.Fragment>
                   );
                 }
 
                 return (
-                  <TRGroup key={`group_${row.index}`}>
-                    <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
-                      {row.cells.map((cell: StandardCell) => (
-                        <TD {...cell.getCellProps(getTableCellProps(getCellProps, cellGetter))}>
-                          {cell.render('Cell')}
-                        </TD>
-                      ))}
-                    </TR>
-                  </TRGroup>
+                  <React.Fragment key={`group_${row.index}`}>
+                    <TRGroup>
+                      <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
+                        {row.cells.map((cell: StandardCell) => (
+                          <TD
+                            {...cell.getCellProps(
+                              getTableCellProps(getCellProps, cellGetter),
+                            )}
+                          >
+                            {cell.render('Cell')}
+                          </TD>
+                        ))}
+                      </TR>
+                    </TRGroup>
+                    {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
+                  </React.Fragment>
                 );
               })}
             </TBody>
             {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
               <TFoot className="table-footer-bottom">
                 {footerGroups.map((group) => (
-                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
+                  <TR
+                    {...group.getFooterGroupProps(
+                      getTableElementProps(getFooterGroupProps),
+                    )}
+                  >
                     {group.headers.map((column) => (
-                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
+                      <TD
+                        {...column.getFooterProps(
+                          getTableElementProps(getFooterProps, mainCellGetter),
+                        )}
+                      >
                         {column.render('Footer')}
                       </TD>
                     ))}

package/src/types.tsx

@@ -85,6 +85,7 @@ export type TableProps = {
     showLoadingState?: boolean,
     LoadingCellComponent?: FunctionComponent<DefaultObject>,
     noDataMessage?: string | ReactElement
+    rowSubComponent?: (row: StandardRow) => ReactElement
 }
 
 export type TableOptions = {
@@ -135,7 +136,7 @@ export type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColum
 
 export type StandardColumn = Column<DefaultObject>
 
-export type StandardRow = Row<DefaultObject>
+export type StandardRow = Row<DefaultObject> & { isExpanded?: boolean }
 
 export type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>
 

package/src/useLoadingState.tsx

@@ -10,22 +10,13 @@ const useLoadingState = (
   LoadingCellComponent: FunctionComponent<DefaultObject>,
 ): LoadingState => {
   const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns
-    .map(({maxWidth, width, Header}: Column, key: number) => {
-      const column: Column<DefaultObject> = {
+    .map((column: Column<DefaultObject>) => {
+      const loadingColumn: Column<DefaultObject> = {
+        ...column,
         Cell: () => <LoadingCellComponent />,
-        accessor: `empty_${key}`,
       };
-      if (maxWidth) {
-        column.maxWidth = maxWidth;
-      }
-      if (width) {
-        column.width = width;
-      }
-      if (Header) {
-        column.Header = Header;
-      }
 
-      return column;
+      return loadingColumn;
     }) : []), [columns, loading, showLoadingState]);
 
   const loadingData = useMemo(() => {