feat: support classNames and styles

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;