feat: support classNames and styles (#1261)

* feat: support classNames and styles

* fix test

* support components

* opt

* rm

* opt

* fix ts type

* rm

Author: thinkasany

docs/examples/className.tsx

@@ -52,6 +52,20 @@ const Demo = () => (
       expandedRowClassName={(record, i) => `ex-row-${i}`}
       data={data}
       className="table"
+      title={() => <span>title</span>}
+      footer={() => <span>footer</span>}
+    />
+    <h2>scroll</h2>
+     <Table
+      columns={columns}
+      rowClassName={(record, i) => `row-${i}`}
+      expandedRowRender={record => <p>extra: {record.a}</p>}
+      expandedRowClassName={(record, i) => `ex-row-${i}`}
+      data={Array(5).fill(data)}
+      className="table"
+      scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
+      title={() => <span>title</span>}
+      footer={() => <span>footer</span>}
     />
   </div>
 );

docs/examples/components.tsx

@@ -24,6 +24,18 @@ const Demo = () => {
   return (
     <div>
       <Table
+        classNames={{
+          body: {
+            wrapper: 'test-body-wrapper',
+            cell: 'test-body-cell',
+            row: 'test-body-row',
+          },
+          header: {
+            wrapper: 'test-header-wrapper',
+            cell: 'test-header-cell',
+            row: 'test-header-row',
+          },
+        }}
         components={{ header: { table } }}
         sticky
         columns={[

src/Body/BodyRow.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import Cell from '../Cell';
 import { responseImmutable } from '../context/TableContext';
@@ -7,13 +7,16 @@ import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import { computedExpandedClassName } from '../utils/expandUtil';
+import { TableProps } from '..';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
   index: number;
   renderIndex: number;
   className?: string;
   style?: React.CSSProperties;
+  classNames: TableProps['classNames']['body'];
+  styles: TableProps['styles']['body'];
   rowComponent: CustomizeComponent;
   cellComponent: CustomizeComponent;
   scopeCellComponent: CustomizeComponent;
@@ -94,6 +97,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   const {
     className,
     style,
+    classNames,
+    styles,
     record,
     index,
     renderIndex,
@@ -103,6 +108,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     cellComponent,
     scopeCellComponent,
   } = props;
+
   const rowInfo = useRowInfo(record, rowKey, index, indent);
   const {
     prefixCls,
@@ -133,16 +139,21 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     <RowComponent
       {...rowProps}
       data-row-key={rowKey}
-      className={classNames(
+      className={cls(
         className,
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
+        classNames.row,
         {
           [expandedClsName]: indent >= 1,
         },
       )}
-      style={{ ...style, ...rowProps?.style }}
+      style={{
+        ...style,
+        ...rowProps?.style,
+        ...styles.row,
+      }}
     >
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
@@ -157,7 +168,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
         return (
           <Cell<RecordType>
-            className={columnClassName}
+            className={cls(columnClassName, classNames.cell)}
+            style={styles.cell}
             ellipsis={column.ellipsis}
             align={column.align}
             scope={column.rowScope}
@@ -187,7 +199,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     expandRowNode = (
       <ExpandedRow
         expanded={expanded}
-        className={classNames(
+        className={cls(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
           expandedClsName,

src/Body/index.tsx

@@ -9,6 +9,7 @@ import { getColumnsKey } from '../utils/valueUtil';
 import BodyRow from './BodyRow';
 import ExpandedRow from './ExpandedRow';
 import MeasureRow from './MeasureRow';
+import cls from 'classnames';
 
 export interface BodyProps<RecordType> {
   data: readonly RecordType[];
@@ -31,6 +32,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     expandedKeys,
     childrenColumnName,
     emptyNode,
+    classNames,
+    styles,
   } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
@@ -40,7 +43,11 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'expandedKeys',
     'childrenColumnName',
     'emptyNode',
+    'classNames',
+    'styles',
   ]);
+  const { body: bodyCls = {} } = classNames || {};
+  const { body: bodyStyles = {} } = styles || {};
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
     useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
@@ -65,6 +72,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
 
       return (
         <BodyRow
+          classNames={bodyCls}
+          styles={bodyStyles}
           key={key}
           rowKey={key}
           record={record}
@@ -97,7 +106,10 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
 
   return (
     <PerfContext.Provider value={perfRef.current}>
-      <WrapperComponent className={`${prefixCls}-tbody`}>
+      <WrapperComponent
+        className={cls(`${prefixCls}-tbody`, bodyCls.wrapper)}
+        style={bodyStyles.wrapper}
+      >
         {/* Measure body column width with additional hidden col */}
         {measureColumnWidth && (
           <MeasureRow

src/Cell/index.tsx

@@ -1,5 +1,5 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
@@ -19,6 +19,7 @@ import { useEvent } from '@rc-component/util';
 export interface CellProps<RecordType extends DefaultRecordType> {
   prefixCls?: string;
   className?: string;
+  style?: React.CSSProperties;
   record?: RecordType;
   /** `column` index is the real show rowIndex */
   index?: number;
@@ -88,6 +89,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     // Style
     prefixCls,
     className,
+    style,
     align,
 
     // Value
@@ -122,6 +124,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   } = props;
 
   const cellPrefixCls = `${prefixCls}-cell`;
+
   const { allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
     'allColumnsFixedLeft',
     'rowHoverable',
@@ -212,7 +215,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     });
 
   // >>>>> ClassName
-  const mergedClassName = classNames(
+  const mergedClassName = cls(
     cellPrefixCls,
     className,
     {
@@ -249,6 +252,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     ...fixedStyle,
     ...alignStyle,
     ...additionalProps.style,
+    ...style,
   };
 
   // >>>>> Children Node

src/FixedHolder/index.tsx

@@ -26,6 +26,7 @@ function useColumnWidth(colWidths: readonly number[], columCount: number) {
 
 export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   className: string;
+  style?: React.CSSProperties;
   noData: boolean;
   maxContentScroll: boolean;
   colWidths: readonly number[];
@@ -46,6 +47,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
 
   const {
     className,
+    style,
     noData,
     columns,
     flattenColumns,
@@ -159,6 +161,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
       style={{
         overflow: 'hidden',
         ...(isSticky ? { top: stickyTopOffset, bottom: stickyBottomOffset } : {}),
+        ...style,
       }}
       ref={setScrollRef}
       className={classNames(className, {

src/Header/Header.tsx

@@ -11,9 +11,13 @@ import type {
   StickyOffsets,
 } from '../interface';
 import HeaderRow from './HeaderRow';
+import cls from 'classnames';
+import { TableProps } from '..';
 
 function parseHeaderRows<RecordType>(
   rootColumns: ColumnsType<RecordType>,
+  classNames: TableProps['classNames']['header'],
+  styles: TableProps['styles']['header'],
 ): CellType<RecordType>[][] {
   const rows: CellType<RecordType>[][] = [];
 
@@ -29,7 +33,8 @@ function parseHeaderRows<RecordType>(
     const colSpans: number[] = columns.filter(Boolean).map(column => {
       const cell: CellType<RecordType> = {
         key: column.key,
-        className: column.className || '',
+        className: cls(column.className, classNames.cell) || '',
+        style: styles.cell,
         children: column.title,
         column,
         colStart: currentColIndex,
@@ -97,18 +102,33 @@ const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
 
   const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
 
-  const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
-  const rows = React.useMemo<CellType<RecordType>[][]>(() => parseHeaderRows(columns), [columns]);
+  const { prefixCls, getComponent, classNames, styles } = useContext(TableContext, [
+    'prefixCls',
+    'getComponent',
+    'classNames',
+    'styles',
+  ]);
+  const { header: headerCls = {} } = classNames || {};
+  const { header: headerStyles = {} } = styles || {};
+  const rows = React.useMemo<CellType<RecordType>[][]>(
+    () => parseHeaderRows(columns, headerCls, headerStyles),
+    [columns, headerCls, headerStyles],
+  );
 
   const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
   const trComponent = getComponent(['header', 'row'], 'tr');
   const thComponent = getComponent(['header', 'cell'], 'th');
 
   return (
-    <WrapperComponent className={`${prefixCls}-thead`}>
+    <WrapperComponent
+      className={cls(`${prefixCls}-thead`, headerCls.wrapper)}
+      style={headerStyles.wrapper}
+    >
       {rows.map((row, rowIndex) => {
         const rowNode = (
           <HeaderRow
+            classNames={headerCls}
+            styles={headerStyles}
             key={rowIndex}
             flattenColumns={flattenColumns}
             cells={row}

src/Header/HeaderRow.tsx

@@ -11,6 +11,7 @@ import type {
 } from '../interface';
 import { getCellFixedInfo } from '../utils/fixUtil';
 import { getColumnsKey } from '../utils/valueUtil';
+import { TableProps } from '..';
 
 export interface RowProps<RecordType> {
   cells: readonly CellType<RecordType>[];
@@ -20,6 +21,8 @@ export interface RowProps<RecordType> {
   cellComponent: CustomizeComponent;
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
   index: number;
+  classNames: TableProps['classNames']['header'];
+  styles: TableProps['styles']['header'];
 }
 
 const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
@@ -31,6 +34,8 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
     cellComponent: CellComponent,
     onHeaderRow,
     index,
+    classNames,
+    styles,
   } = props;
   const { prefixCls } = useContext(TableContext, ['prefixCls']);
   let rowProps: React.HTMLAttributes<HTMLElement>;
@@ -44,7 +49,7 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
   const columnsKey = getColumnsKey(cells.map(cell => cell.column));
 
   return (
-    <RowComponent {...rowProps}>
+    <RowComponent {...rowProps} className={classNames.row} style={styles.row}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
         const { column } = cell;
         const fixedInfo = getCellFixedInfo(

src/Panel/index.tsx

@@ -3,10 +3,11 @@ import * as React from 'react';
 export interface TitleProps {
   className: string;
   children: React.ReactNode;
+  style: React.CSSProperties;
 }
 
-function Panel({ className, children }: TitleProps) {
-  return <div className={className}>{children}</div>;
+function Panel({ className, style, children }: TitleProps) {
+  return <div className={className} style={style}>{children}</div>;
 }
 
 export default Panel;