Merge pull request #114 from Tumao727/fix-sort-component

fix component table row sort not working

client/src/components/grid/TableHead.tsx

@@ -74,20 +74,24 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
             key={headCell.id}
             align={headCell.align || 'left'}
             padding={headCell.disablePadding ? 'none' : 'default'}
-            sortDirection={orderBy === headCell.id ? order : false}
+            sortDirection={
+              orderBy === (headCell.sortBy || headCell.id) ? order : false
+            }
             className={classes.tableCell}
           >
             {headCell.label && !headCell.notSort ? (
               <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : 'asc'}
-                onClick={createSortHandler(headCell.id)}
+                active={orderBy === (headCell.sortBy || headCell.id)}
+                direction={
+                  orderBy === (headCell.sortBy || headCell.id) ? order : 'asc'
+                }
+                onClick={createSortHandler(headCell.sortBy || headCell.id)}
               >
                 <Typography variant="body1" className={classes.tableHeader}>
                   {headCell.label}
                 </Typography>
 
-                {orderBy === headCell.id ? (
+                {orderBy === (headCell.sortBy || headCell.id) ? (
                   <Typography className={classes.visuallyHidden}>
                     {order === 'desc'
                       ? 'sorted descending'

client/src/components/grid/Types.ts

@@ -78,6 +78,8 @@ export type ColDefinitionsType = {
   showActionCell?: boolean;
   isHoverAction?: boolean;
   notSort?: boolean;
+  // custom sort rule property, default is row id
+  sortBy?: string;
   onClick?: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     data?: any

client/src/pages/collections/Collections.tsx

@@ -269,12 +269,14 @@ const Collections = () => {
       id: 'nameElement',
       align: 'left',
       disablePadding: true,
+      sortBy: '_name',
       label: collectionTrans('name'),
     },
     {
       id: 'statusElement',
       align: 'left',
       disablePadding: false,
+      sortBy: '_status',
       label: collectionTrans('status'),
     },
     {

client/src/pages/schema/Schema.tsx

@@ -155,6 +155,7 @@ const Schema: FC<{
       align: 'left',
       disablePadding: true,
       label: collectionTrans('fieldName'),
+      sortBy: '_fieldName',
     },
     {
       id: '_fieldType',
@@ -180,12 +181,14 @@ const Schema: FC<{
       align: 'left',
       disablePadding: true,
       label: indexTrans('type'),
+      sortBy: '_indexType',
     },
     {
       id: '_indexParamElement',
       align: 'left',
       disablePadding: false,
       label: indexTrans('param'),
+      notSort: true,
     },
     {
       id: '_desc',