refactor(CTable): improve syntax to limit the number of re-renders

Author: mrholek

packages/coreui-react/src/components/table/CTable.tsx

@@ -10,6 +10,7 @@ import { CTableDataCell, CTableDataCellProps } from './CTableDataCell'
 import { CTableRow, CTableRowProps } from './CTableRow'
 import { CTableFoot, CTableFootProps } from './CTableFoot'
 import { CTableCaption } from './CTableCaption'
+import { CTableResponsiveWrapper } from './CTableResponsiveWrapper'
 
 export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
   /**
@@ -206,72 +207,62 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
           : pretifyName(column.key)
         : pretifyName(column)
 
-    const Table = () => (
-      <table className={_className} {...rest} ref={ref}>
-        {((caption && caption !== 'top') || captionTop) && (
-          <CTableCaption>{caption || captionTop}</CTableCaption>
-        )}
-        {columns && (
-          <CTableHead {...tableHeadProps}>
-            <CTableRow>
-              {columns.map((column: Column, index: number) => (
-                <CTableHeaderCell
-                  {...(column._props && { ...column._props })}
-                  {...(column._style && { style: { ...column._style } })}
-                  key={index}
-                >
-                  {label(column)}
-                </CTableHeaderCell>
-              ))}
-            </CTableRow>
-          </CTableHead>
-        )}
-        {items && (
-          <CTableBody>
-            {items.map((item: Item, index: number) => (
-              <CTableRow {...(item._props && { ...item._props })} key={index}>
-                {rawColumnNames.map((colName: string, index: number) => {
-                  return item[colName] ? (
-                    <CTableDataCell
-                      {...(item._cellProps && {
-                        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-                      })}
-                      key={index}
-                    >
-                      {item[colName]}
-                    </CTableDataCell>
-                  ) : null
-                })}
+    return (
+      <CTableResponsiveWrapper responsive={responsive}>
+        <table className={_className} {...rest} ref={ref}>
+          {((caption && caption !== 'top') || captionTop) && (
+            <CTableCaption>{caption || captionTop}</CTableCaption>
+          )}
+          {columns && (
+            <CTableHead {...tableHeadProps}>
+              <CTableRow>
+                {columns.map((column: Column, index: number) => (
+                  <CTableHeaderCell
+                    {...(column._props && { ...column._props })}
+                    {...(column._style && { style: { ...column._style } })}
+                    key={index}
+                  >
+                    {label(column)}
+                  </CTableHeaderCell>
+                ))}
               </CTableRow>
-            ))}
-          </CTableBody>
-        )}
-        {children}
-        {footer && (
-          <CTableFoot {...tableFootProps}>
-            <CTableRow>
-              {footer.map((item: FooterItem, index: number) => (
-                <CTableDataCell {...(item._props && { ...item._props })} key={index}>
-                  {typeof item === 'object' ? item.label : item}
-                </CTableDataCell>
+            </CTableHead>
+          )}
+          {items && (
+            <CTableBody>
+              {items.map((item: Item, index: number) => (
+                <CTableRow {...(item._props && { ...item._props })} key={index}>
+                  {rawColumnNames.map((colName: string, index: number) => {
+                    return item[colName] ? (
+                      <CTableDataCell
+                        {...(item._cellProps && {
+                          ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+                          ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+                        })}
+                        key={index}
+                      >
+                        {item[colName]}
+                      </CTableDataCell>
+                    ) : null
+                  })}
+                </CTableRow>
               ))}
-            </CTableRow>
-          </CTableFoot>
-        )}
-      </table>
-    )
-
-    return responsive ? (
-      <div
-        className={
-          typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
-        }
-      >
-        <Table />
-      </div>
-    ) : (
-      <Table />
+            </CTableBody>
+          )}
+          {children}
+          {footer && (
+            <CTableFoot {...tableFootProps}>
+              <CTableRow>
+                {footer.map((item: FooterItem, index: number) => (
+                  <CTableDataCell {...(item._props && { ...item._props })} key={index}>
+                    {typeof item === 'object' ? item.label : item}
+                  </CTableDataCell>
+                ))}
+              </CTableRow>
+            </CTableFoot>
+          )}
+        </table>
+      </CTableResponsiveWrapper>
     )
   },
 )

packages/coreui-react/src/components/table/CTableDataCell.tsx

@@ -25,6 +25,10 @@ export interface CTableDataCellProps
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
+  /**
+   * @ignore
+   */
+  colSpan?: number
 }
 
 export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(

packages/coreui-react/src/components/table/CTableResponsiveWrapper.tsx

@@ -0,0 +1,39 @@
+import React, { FC, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export interface CTableResponsiveWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  children: any
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+}
+
+export const CTableResponsiveWrapper: FC<CTableResponsiveWrapperProps> = ({
+  children,
+  responsive,
+  ...rest
+}) => {
+  return responsive ? (
+    <div
+      className={
+        typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
+      }
+      {...rest}
+    >
+      {children}
+    </div>
+  ) : (
+    children
+  )
+}
+
+CTableResponsiveWrapper.propTypes = {
+  children: PropTypes.any,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+}
+
+CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper'