chore: custom table sort

src/components/seal-table/components/table-header.tsx

@@ -1,10 +1,30 @@
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import React from 'react';
 import '../styles/header.less';
 import { TableHeaderProps } from '../types';
 
 const TableHeader: React.FC<TableHeaderProps> = (props) => {
-  const { title, style, align, firstCell, lastCell } = props;
+  const {
+    title,
+    style,
+    align,
+    firstCell,
+    lastCell,
+    sortOrder,
+    onSort,
+    sorter,
+    dataIndex,
+    defaultSortOrder
+  } = props;
+
+  const handleOnSort = () => {
+    if (sortOrder === 'ascend') {
+      onSort?.(dataIndex, 'descend');
+    } else {
+      onSort?.(dataIndex, 'ascend');
+    }
+  };
   return (
     <div
       style={{ ...style }}
@@ -13,10 +33,29 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
         'table-header-center': align === 'center',
         'table-header-right': align === 'right',
         'table-header-first': firstCell,
-        'table-header-last': lastCell
+        'table-header-last': lastCell,
+        'table-header-sorter': sorter
       })}
     >
-      <div className="table-header-cell">{title}</div>
+      {sorter ? (
+        <span className="sorter-header" onClick={handleOnSort}>
+          <span className="table-header-cell">{title}</span>
+          <span className="sorter">
+            <CaretUpOutlined
+              className={classNames('sorter-up', {
+                'sorter-active': sortOrder === 'ascend'
+              })}
+            ></CaretUpOutlined>
+            <CaretDownOutlined
+              className={classNames('sorter-down', {
+                'sorter-active': sortOrder === 'descend'
+              })}
+            ></CaretDownOutlined>
+          </span>
+        </span>
+      ) : (
+        <div className="table-header-cell">{title}</div>
+      )}
     </div>
   );
 };

src/components/seal-table/index.tsx

@@ -24,6 +24,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     rowKey,
     childParentKey,
     onExpand,
+    onSort,
     expandedRowKeys,
     loading,
     expandable,
@@ -117,12 +118,25 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
         <Row className="row">
           {React.Children.map(props.children, (child, i) => {
             const { props: columnProps } = child as any;
-            const { title, align, span, headerStyle } =
-              columnProps as SealColumnProps;
+            const {
+              title,
+              dataIndex,
+              align,
+              span,
+              headerStyle,
+              sortOrder,
+              sorter,
+              defaultSortOrder
+            } = columnProps as SealColumnProps;
             if (React.isValidElement(child)) {
               return (
                 <Col span={span} key={i}>
                   <TableHeader
+                    onSort={onSort}
+                    sorter={sorter}
+                    dataIndex={dataIndex}
+                    sortOrder={sortOrder}
+                    defaultSortOrder={defaultSortOrder}
                     title={title}
                     style={headerStyle}
                     firstCell={i === 0}

src/components/seal-table/styles/header.less

@@ -1,4 +1,5 @@
 .table-header {
+  min-height: 20px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -8,16 +9,56 @@
   &-last {
     border-right: none;
   }
+
   &-cell {
     font-weight: 600;
   }
+
   &-left {
     justify-content: flex-start;
   }
+
   &-right {
     justify-content: flex-end;
   }
+
   &-center {
     justify-content: center;
   }
+
+  .sorter-header {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    .sorter {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 4px;
+
+      .anticon {
+        font-size: 10px;
+        color: rgba(0, 0, 0, 29%);
+      }
+
+      .sorter-up {
+        margin-bottom: -0.125em;
+      }
+
+      .sorter-down {
+        margin-top: -0.125em;
+      }
+
+      .sorter-active {
+        color: var(--ant-color-primary);
+
+        .anticon {
+          color: var(--ant-color-primary);
+        }
+      }
+    }
+  }
 }

src/components/seal-table/types.ts

@@ -8,9 +8,17 @@ export interface SealColumnProps {
   span: number;
   align?: 'left' | 'center' | 'right';
   headerStyle?: React.CSSProperties;
+  sorter?: boolean;
+  defaultSortOrder?: 'ascend' | 'descend';
+  sortOrder?: 'ascend' | 'descend' | null;
 }
 
 export interface TableHeaderProps {
+  sorter?: boolean;
+  defaultSortOrder?: 'ascend' | 'descend';
+  sortOrder?: 'ascend' | 'descend' | null;
+  dataIndex: string;
+  onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
   children?: React.ReactNode;
   title: string;
   style?: React.CSSProperties;
@@ -34,6 +42,7 @@ export interface SealTableProps {
   pollingChildren?: boolean;
   watchChildren?: boolean;
   loading?: boolean;
+  onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
   onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;