@propellerads/table 5.0.4 → 5.1.1

package/src/index.tsx

@@ -1,65 +1,62 @@
+import {ArrowDown, ArrowUp, Color, Size} from '@propellerads/icon';
+import Checkbox from '@propellerads/input-checkbox';
 import React, {FunctionComponent, useEffect, useMemo, useRef} from 'react';
 import {
-  useSortBy,
-  useTable,
-  useRowSelect,
-  usePagination,
+  Column,
+  TableState,
   useExpanded,
   useFlexLayout,
+  usePagination,
   useResizeColumns,
-  Column,
+  useRowSelect,
+  useSortBy,
+  useTable,
 } from 'react-table';
-
-import {ArrowDown, ArrowUp, Color, Size} from '@propellerads/icon';
-import Checkbox from '@propellerads/input-checkbox';
-
-import useLoadingState from './useLoadingState';
-import useTableShadow from './useTableShadow';
-
-import {
-  FOOTER_PLACEMENT,
-  TableProps,
-  PaginationProps,
-  StandardHooks,
-  StandardColumn,
-  StandardRow,
-  StandardCell,
-  ColumnWithSort,
-  TableHooksInstanceProps,
-  TableOptionsProps,
-  SelectableRow,
-  DefaultObject,
-} from './types';
-
 import {
-  getTableProps as getTableBodyProps,
-  getTableElementProps,
-  getTableElementInternalProps,
   cellGetter,
-  mainCellGetter,
+  getTableProps as getTableBodyProps,
   getTableCellProps,
+  getTableElementInternalProps,
+  getTableElementProps,
   getTableRowProps,
+  mainCellGetter,
 } from './propsGetter';
-
 import {
-  TableRoot as _TableRoot,
-  TableWrapper as _TableWrapper,
-  TableContent as _TableContent,
+  EmptyStateCell as _EmptyStateCell,
   HeadCell as _HeadCell,
+  TableContent as _TableContent,
+  TableCore as _TableCore,
   TableLoading as _TableLoading,
   TableLoadingInner as _TableLoadingInner,
+  TableRoot as _TableRoot,
+  TableWrapper as _TableWrapper,
+  TBody as _TBody,
   TD as _TD,
-  TableCore as _TableCore,
+  TFoot as _TFoot,
+  TH as _TH,
   THead as _THead,
   TR as _TR,
-  TH as _TH,
-  TBody as _TBody,
-  TRGroup as _TRGroup,
-  TFoot as _TFoot,
-  EmptyStateCell as _EmptyStateCell,
   TResizer as _TResizer,
+  TRGroup as _TRGroup,
 } from './style';
 
+import {
+  ColumnWithSort,
+  DefaultObject,
+  FOOTER_PLACEMENT,
+  PaginationProps,
+  SelectableRow,
+  StandardCell,
+  StandardColumn,
+  StandardHooks,
+  StandardRow,
+  TableHooksInstanceProps,
+  TableOptionsProps,
+  TableProps,
+} from './types';
+import useLoadingState from './useLoadingState';
+import useTableShadow from './useTableShadow';
+
 const TableRoot = _TableRoot as unknown as React.FunctionComponent<DefaultObject>;
 const TableWrapper = _TableWrapper as unknown as React.FunctionComponent<DefaultObject>;
 const TableContent = _TableContent as unknown as React.FunctionComponent<DefaultObject>;
@@ -77,20 +74,20 @@ const TFoot = _TFoot as unknown as React.FunctionComponent<DefaultObject>;
 const EmptyStateCell = _EmptyStateCell as unknown as React.FunctionComponent<DefaultObject>;
 const TResizer = _TResizer as unknown as React.FunctionComponent<DefaultObject>;
 
-const isEnableRowSelectDefault: () => boolean = () => true;
+const isEnableRowSelectDefault: (_original?: DefaultObject) => boolean = () => true;
 const selectColumnPropsDefault = {};
 const getRowPrePropsDefault: () => DefaultObject = () => ({});
 
 export const defaultProps = {
   hasDefaultPagination: false,
   isLoading: false,
-  footerPlacement: [],
+  footerPlacement: [] as FOOTER_PLACEMENT[],
   loadingMessage: 'loading...',
   labelPerPage: 'Show rows',
   parentElementId: 'parent-element',
   tableContentId: '',
   showLoadingState: false,
-  initialState: {},
+  initialState: {} as Partial<TableState<DefaultObject>>,
   LoadingCellComponent: EmptyStateCell,
   getRowPreProps: getRowPrePropsDefault,
   isEnableRowSelect: isEnableRowSelectDefault,
@@ -149,40 +146,38 @@ function getHeadContent(column: ColumnWithSort) {
   return column.render('Header');
 }
 
-const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
-  const {
-    columns,
-    data,
-    totalItems,
-    fetchData,
-    controlledPagination,
-    initialState,
-    isLoading,
-    loadingMessage,
-    labelPerPage,
-    footerPlacement,
-    onSortedChange,
-    hasDefaultPagination,
-    onSelectRowsChange,
-    parentElementId,
-    tableContentId,
-    LoadingCellComponent,
-    PaginationComponent,
-    getRowPreProps,
-    getTableProps,
-    getHeaderGroupProps,
-    getHeaderProps,
-    getRowProps,
-    getCellProps,
-    getFooterProps,
-    getFooterGroupProps,
-    showLoadingState,
-    noDataMessage,
-    rowSubComponent,
-    isEnableRowSelect,
-    selectColumnProps,
-  } = props;
-
+const Table: FunctionComponent<TableProps & DefaultProps> = ({
+  columns,
+  data,
+  totalItems,
+  fetchData,
+  controlledPagination,
+  initialState = defaultProps.initialState,
+  isLoading = defaultProps.isLoading,
+  loadingMessage = defaultProps.loadingMessage,
+  labelPerPage = defaultProps.labelPerPage,
+  footerPlacement = defaultProps.footerPlacement,
+  onSortedChange,
+  hasDefaultPagination = defaultProps.hasDefaultPagination,
+  onSelectRowsChange,
+  parentElementId = defaultProps.parentElementId,
+  tableContentId = defaultProps.tableContentId,
+  LoadingCellComponent = defaultProps.LoadingCellComponent,
+  PaginationComponent,
+  getRowPreProps = defaultProps.getRowPreProps as NonNullable<TableProps['getRowPreProps']>,
+  getTableProps,
+  getHeaderGroupProps,
+  getHeaderProps,
+  getRowProps,
+  getCellProps,
+  getFooterProps,
+  getFooterGroupProps,
+  showLoadingState = defaultProps.showLoadingState,
+  noDataMessage = defaultProps.noDataMessage,
+  rowSubComponent,
+  isEnableRowSelect = defaultProps.isEnableRowSelect,
+  selectColumnProps = defaultProps.selectColumnProps,
+}) => {
   const memoColumns = useMemo(() => columns, [columns]);
 
   const {loadingColumns, loadingData} = useLoadingState(
@@ -303,7 +298,6 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
     previousPage,
     setPageSize,
     state: {selectedRowIds, pageIndex, pageSize},
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
   } = rest as TableHooksInstanceProps;
 
@@ -420,36 +414,50 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
         <TableContent id={tableContentId} className="table-content">
           <TableCore {..._getTableProps(getTableBodyProps(getTableProps))} ref={tableRef}>
             <THead className="table-head" data-role="table-head">
-              {headerGroups.map((headerGroup) => (
-                <TR {...headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))}>
-                  {headerGroup.headers.map((column) => {
-                    const headerProps = extendSortByProps(column) as DefaultObject;
-
-                    return (
-                      <TH
-                        {...column.getHeaderProps(
-                          getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter),
-                        )}
-                      >
-                        {getHeadContent(column)}
-                        {renderResizer(column)}
-                      </TH>
-                    );
-                  })}
-                </TR>
-              ))}
+              {headerGroups.map((headerGroup) => {
+                const {key: headerGroupKey, ...headerGroupProps} = headerGroup.getHeaderGroupProps(
+                  getTableElementProps(getHeaderGroupProps),
+                );
+                return (
+                  <TR key={headerGroupKey} {...headerGroupProps}>
+                    {headerGroup.headers.map((column) => {
+                      const headerProps = extendSortByProps(column) as DefaultObject;
+                      const {key: columnKey, ...thProps} = column.getHeaderProps(
+                        getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter),
+                      );
+
+                      return (
+                        <TH key={columnKey} {...thProps}>
+                          {getHeadContent(column)}
+                          {renderResizer(column)}
+                        </TH>
+                      );
+                    })}
+                  </TR>
+                );
+              })}
             </THead>
             {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (
               <TFoot className="table-footer-top" data-role="table-footer-top">
-                {footerGroups.map((group) => (
-                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
-                    {group.headers.map((column) => (
-                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
-                        {column.render('Footer')}
-                      </TD>
-                    ))}
-                  </TR>
-                ))}
+                {footerGroups.map((group) => {
+                  const {key: footerTopGroupKey, ...footerTopGroupProps} = group.getFooterGroupProps(
+                    getTableElementProps(getFooterGroupProps),
+                  );
+                  return (
+                    <TR key={footerTopGroupKey} {...footerTopGroupProps}>
+                      {group.headers.map((column) => {
+                        const {key: footerTopColumnKey, ...footerTopTdProps} = column.getFooterProps(
+                          getTableElementProps(getFooterProps, mainCellGetter),
+                        );
+                        return (
+                          <TD key={footerTopColumnKey} {...footerTopTdProps}>
+                            {column.render('Footer')}
+                          </TD>
+                        );
+                      })}
+                    </TR>
+                  );
+                })}
               </TFoot>
             )}
             <TBody className="table-body" data-role="table-body">
@@ -459,15 +467,16 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
 
                 if (isDelimiterTd) {
                   const cell = row.cells[0].render('Cell') as React.ReactNode;
+                  const {key: delimiterRowKey, ...delimiterRowProps} = row.getRowProps(getTableRowProps(getRowProps));
+                  const {key: delimiterCellKey, ...delimiterCellProps} = row.cells[0].getCellProps(
+                    getTableCellProps(getCellProps, cellGetter),
+                  );
 
                   return (
                     <React.Fragment key={`group_${row.index}`}>
                       <TRGroup>
-                        <TR {...row.getRowProps(getTableRowProps(getRowProps))}>
-                          <TD
-                            colSpan={visibleColumns.length}
-                            {...row.cells[0].getCellProps(getTableCellProps(getCellProps, cellGetter))}
-                          >
+                        <TR key={delimiterRowKey} {...delimiterRowProps}>
+                          <TD key={delimiterCellKey} colSpan={visibleColumns.length} {...delimiterCellProps}>
                             <strong>{cell}</strong>
                           </TD>
                         </TR>
@@ -477,15 +486,22 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
                   );
                 }
 
+                const {key: rowKey, ...rowProps} = row.getRowProps(getTableRowProps(getRowProps));
+
                 return (
                   <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 key={rowKey} {...rowProps}>
+                        {row.cells.map((cell: StandardCell) => {
+                          const {key: cellKey, ...cellProps} = cell.getCellProps(
+                            getTableCellProps(getCellProps, cellGetter),
+                          );
+                          return (
+                            <TD key={cellKey} {...cellProps}>
+                              {cell.render('Cell')}
+                            </TD>
+                          );
+                        })}
                       </TR>
                     </TRGroup>
                     {row?.isExpanded && rowSubComponent && rowSubComponent(row)}
@@ -495,15 +511,25 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
             </TBody>
             {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (
               <TFoot className="table-footer-bottom" data-role="table-footer-bottom">
-                {footerGroups.map((group) => (
-                  <TR {...group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))}>
-                    {group.headers.map((column) => (
-                      <TD {...column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))}>
-                        {column.render('Footer')}
-                      </TD>
-                    ))}
-                  </TR>
-                ))}
+                {footerGroups.map((group) => {
+                  const {key: footerBottomGroupKey, ...footerBottomGroupProps} = group.getFooterGroupProps(
+                    getTableElementProps(getFooterGroupProps),
+                  );
+                  return (
+                    <TR key={footerBottomGroupKey} {...footerBottomGroupProps}>
+                      {group.headers.map((column) => {
+                        const {key: footerBottomColumnKey, ...footerBottomTdProps} = column.getFooterProps(
+                          getTableElementProps(getFooterProps, mainCellGetter),
+                        );
+                        return (
+                          <TD key={footerBottomColumnKey} {...footerBottomTdProps}>
+                            {column.render('Footer')}
+                          </TD>
+                        );
+                      })}
+                    </TR>
+                  );
+                })}
               </TFoot>
             )}
           </TableCore>
@@ -515,6 +541,4 @@ const Table: FunctionComponent<TableProps & DefaultProps> = (props) => {
   );
 };
 
-Table.defaultProps = defaultProps;
-
 export {Table};

package/src/propsGetter.tsx

@@ -1,27 +1,25 @@
 import {
-  ElementGetter,
   BaseMeta,
-  TableGetter,
-  ElementCellPropGetter,
-  ElementRowPropGetter,
   DefaultObject,
+  ElementCellPropGetter,
+  ElementGetter,
   ElementHeaderFooterPropGetter,
-  GetTableElementPropsGetter,
+  ElementRowPropGetter,
   GetTableContainerPropsGetter,
   GetTableElementInternalPropsGetter,
+  GetTableElementPropsGetter,
+  TableGetter,
 } from './types';
 
 export const defaultGetter: ElementGetter = (props) => props;
 
 export const cellGetter: ElementGetter = (props, {cell}) => ({
   ...props,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   align: cell?.column?.align,
 });
 export const mainCellGetter: ElementGetter = (props, {column}) => ({
   ...props,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   align: column?.align,
 });

package/src/useTableShadow.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import {useEffect} from 'react';