fix: change tag td => th (#1075)

* fix: change tag td => th

* fix: fix test case

* lint: fix lint

* test: fix test case

Author: li-jia-nan

src/Header/Header.tsx

@@ -90,20 +90,19 @@ export interface HeaderProps<RecordType> {
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
 }
 
-function Header<RecordType>(props: HeaderProps<RecordType>): React.ReactElement {
+const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
 
   const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
 
   const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
-  const rows: CellType<RecordType>[][] = React.useMemo(() => parseHeaderRows(columns), [columns]);
+  const rows = React.useMemo<CellType<RecordType>[][]>(() => parseHeaderRows(columns), [columns]);
 
   const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
   const trComponent = getComponent(['header', 'row'], 'tr');
   const thComponent = getComponent(['header', 'cell'], 'th');
-  const tdComponent = getComponent(['header', 'cell'], 'td');
 
   return (
     <WrapperComponent className={`${prefixCls}-thead`}>
@@ -116,16 +115,14 @@ function Header<RecordType>(props: HeaderProps<RecordType>): React.ReactElement
             stickyOffsets={stickyOffsets}
             rowComponent={trComponent}
             cellComponent={thComponent}
-            tdCellComponent={tdComponent}
             onHeaderRow={onHeaderRow}
             index={rowIndex}
           />
         );
-
         return rowNode;
       })}
     </WrapperComponent>
   );
-}
+};
 
 export default responseImmutable(Header);

src/Header/HeaderRow.tsx

@@ -18,21 +18,20 @@ export interface RowProps<RecordType> {
   flattenColumns: readonly ColumnType<RecordType>[];
   rowComponent: CustomizeComponent;
   cellComponent: CustomizeComponent;
-  tdCellComponent: CustomizeComponent;
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
   index: number;
 }
 
-function HeaderRow<RecordType>({
-  cells,
-  stickyOffsets,
-  flattenColumns,
-  rowComponent: RowComponent,
-  cellComponent: CellComponent,
-  tdCellComponent,
-  onHeaderRow,
-  index,
-}: RowProps<RecordType>) {
+const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
+  const {
+    cells,
+    stickyOffsets,
+    flattenColumns,
+    rowComponent: RowComponent,
+    cellComponent: CellComponent,
+    onHeaderRow,
+    index,
+  } = props;
   const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
@@ -68,7 +67,7 @@ function HeaderRow<RecordType>({
             scope={column.title ? (cell.colSpan > 1 ? 'colgroup' : 'col') : null}
             ellipsis={column.ellipsis}
             align={column.align}
-            component={column.title ? CellComponent : tdCellComponent}
+            component={CellComponent}
             prefixCls={prefixCls}
             key={columnsKey[cellIndex]}
             {...fixedInfo}
@@ -79,7 +78,7 @@ function HeaderRow<RecordType>({
       })}
     </RowComponent>
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   HeaderRow.displayName = 'HeaderRow';

tests/FixedColumn.spec.tsx

@@ -276,10 +276,10 @@ describe('Table.FixedColumn', () => {
       });
 
       expect(container.querySelectorAll('tbody .rc-table-cell-fix-left')).toHaveLength(2);
-      expect(container.querySelectorAll('thead td')[1]).toHaveStyle({
+      expect(container.querySelectorAll('thead th')[1]).toHaveStyle({
         left: '0px',
       });
-      expect(container.querySelectorAll('thead td')[2]).toHaveStyle({
+      expect(container.querySelectorAll('thead th')[2]).toHaveStyle({
         left: '1000px',
       });
     });

tests/Table.spec.jsx

@@ -300,29 +300,6 @@ describe('Table.Basic', () => {
     });
   });
 
-  it('renders td instead of th if header title is empty', () => {
-    const wrapper = mount(
-      createTable({
-        columns: [
-          {
-            title: '',
-            dataIndex: 'firstName',
-            key: 'firstName',
-          },
-          {
-            title: 'Last Name',
-            dataIndex: 'lastName',
-            key: 'lastName',
-          },
-        ],
-        data: [{ firstName: 'John', lastName: 'Doe', key: '1' }],
-      }),
-    );
-
-    expect(wrapper.find('thead td')).toHaveLength(1);
-    expect(wrapper.find('thead th')).toHaveLength(1);
-  });
-
   it('renders column correctly', () => {
     const columns = [
       {

tests/__snapshots__/ExpandRow.spec.jsx.snap

@@ -159,7 +159,7 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
                 style="position: sticky; left: 0px;"
               />
@@ -344,7 +344,7 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
                 style="position: sticky; left: 0px;"
               />
@@ -646,7 +646,7 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left"
                 style="position: sticky; left: 0px;"
               />
@@ -1204,7 +1204,7 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
                 style="position: sticky; left: 0px;"
               />
@@ -1410,7 +1410,7 @@ LoadedCheerio {
               >
                 Gender
               </th>
-              <td
+              <th
                 class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
                 style="position: sticky; right: 0px;"
               />

tests/__snapshots__/FixedColumn.spec.tsx.snap

@@ -2068,7 +2068,7 @@ LoadedCheerio {
               >
                 title12
               </th>
-              <td
+              <th
                 class="rc-table-cell rc-table-cell-fix-right rc-table-cell-scrollbar"
                 style="position: sticky; right: 0px;"
               />
@@ -2941,7 +2941,7 @@ LoadedCheerio {
               >
                 title12
               </th>
-              <td
+              <th
                 class="rc-table-cell rc-table-cell-fix-right rc-table-cell-scrollbar"
                 style="position: sticky; right: 0px;"
               />

tests/__snapshots__/Table.spec.jsx.snap

@@ -394,13 +394,13 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell"
               />
-              <td
+              <th
                 class="rc-table-cell"
               />
-              <td
+              <th
                 class="rc-table-cell rc-table-cell-scrollbar"
               />
             </tr>
@@ -1021,7 +1021,7 @@ LoadedCheerio {
             class="rc-table-thead"
           >
             <tr>
-              <td
+              <th
                 class="rc-table-cell"
               />
             </tr>
@@ -1212,7 +1212,7 @@ LoadedCheerio {
               >
                 Name
               </th>
-              <td
+              <th
                 class="rc-table-cell rc-table-cell-scrollbar"
               />
             </tr>