refactor(tables): share parent column grid in expandable child rows

- llmodels/model-routes/cluster child rows use ExpandedRowGrid + Cell
  (auto-flow spans, no parent-key/grid-line math)
- define --seal-table-row-min-height token in global.less
- routes created_at column: span -> fixed width 180

src/global.less

@@ -91,6 +91,7 @@ html {
   // ======== container ============
   --color-border-container: #ededed;
   --color-text-table-header: #71717a;
+  --seal-table-row-min-height: 68px;
 }
 
 html[data-theme='realDark'] {

src/pages/cluster-management/clusters.tsx

@@ -358,6 +358,9 @@ const Clusters: React.FC = () => {
         dataList={list}
         provider={options.parent?.provider}
         clusterId={options.parent?.id}
+        gridTemplate={options.gridTemplate}
+        prefixWidth={options.prefixWidth}
+        columns={options.columns}
       />
     );
   };

src/pages/cluster-management/components/pool-rows.tsx

@@ -2,13 +2,14 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import {
   CellContent,
+  type ChildGridOptions,
   DeleteModal,
-  RowChildren,
+  ExpandedRowGrid,
   TableRowProvider
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Col, message, Row } from 'antd';
+import { message } from 'antd';
 import _ from 'lodash';
 import React, { useRef, useState } from 'react';
 import { deleteWorkerPool, updateWorkerPool } from '../apis';
@@ -16,7 +17,10 @@ import { ProviderType } from '../config';
 import { NodePoolFormData, NodePoolListItem } from '../config/types';
 import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
-interface PoolRowsProps {
+interface PoolRowsProps extends Pick<
+  ChildGridOptions,
+  'gridTemplate' | 'prefixWidth' | 'columns'
+> {
   dataList: NodePoolListItem[];
   provider: ProviderType;
   clusterId: number | string;
@@ -25,9 +29,35 @@ interface PoolRowsProps {
 const PoolRows: React.FC<PoolRowsProps> = ({
   dataList,
   provider,
-  clusterId
+  clusterId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns: parentColumns
 }) => {
   const intl = useIntl();
+
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, keyed on the pool column's OWN dataIndex — never on a
+  // parent cluster column key. Parent layout: name (1) | provider…state middle
+  // region | created_at (1) | operations (1). The three middle pool columns
+  // cover that region: `replicas`→state (last, 1 track), `image_name`→
+  // models+workers (2 tracks), `instance_type` absorbs the rest (plugins +
+  // provider + gpus).
+  const columnCount = parentColumns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 3, 1);
+  const spanFor = (dataIndex: string): number => {
+    switch (dataIndex) {
+      case 'instance_type':
+        return Math.max(middleSpan - 3, 1);
+      case 'image_name':
+        return 2;
+      case 'replicas':
+        return 1;
+      default:
+        // name / created_at / operations align 1:1 with their parent column.
+        return 1;
+    }
+  };
   const modalRef = useRef<any>(null);
   const [addPoolStatus, setAddPoolStatus] = useState<{
     open: boolean;
@@ -62,8 +92,10 @@ const PoolRows: React.FC<PoolRowsProps> = ({
     }
   };
 
-  const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
+  const handleOnCell = async (
-    console.log('handleOncell===', row, dataIndex);
+    row: NodePoolListItem,
+    _data: { dataIndex: string; newValue: any; oldValue: any }
+  ) => {
     try {
       await updateWorkerPool({
         data: row,
@@ -118,31 +150,26 @@ const PoolRows: React.FC<PoolRowsProps> = ({
     <>
       {dataList?.map((data: NodePoolListItem) => {
         return (
-          <div
+          <TableRowProvider
             key={data.id}
-            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
+            value={{ row: data, onCell: handleOnCell }}
           >
-            <TableRowProvider value={{ row: data, onCell: handleOnCell }}>
+            <ExpandedRowGrid
-              <RowChildren>
+              gridTemplate={gridTemplate}
-                <Row style={{ width: '100%' }} align="middle">
+              prefixWidth={prefixWidth}
-                  {columns.map((col: Record<string, any>) => {
+            >
-                    return (
+              {columns.map((col: Record<string, any>) => (
-                      <Col
+                <ExpandedRowGrid.Cell
-                        key={col.dataIndex || col.key}
+                  key={col.dataIndex || col.key}
-                        span={col.span}
+                  span={spanFor(col.dataIndex)}
-                        style={{
+                >
-                          paddingInline: 0,
+                  <CellContent
-                          ...(col.style || {})
+                    {..._.omit(col, ['key', 'style', 'span'])}
-                        }}
+                  ></CellContent>
-                      >
+                </ExpandedRowGrid.Cell>
-                        <CellContent {..._.omit(col, ['key'])}></CellContent>
+              ))}
-                      </Col>
+            </ExpandedRowGrid>
-                    );
+          </TableRowProvider>
-                  })}
-                </Row>
-              </RowChildren>
-            </TableRowProvider>
-          </div>
         );
       })}
       <AddPool

src/pages/cluster-management/hooks/use-pools-columns.tsx

@@ -43,9 +43,6 @@ const usePoolsColumns = (
           showTitle: false
         },
         span: 3,
-        style: {
-          paddingInline: 'var(--ant-table-cell-padding-inline)'
-        },
         render: (text: string) => (
           <AutoTooltip title={text} ghost minWidth={20}>
             {text}
@@ -60,9 +57,6 @@ const usePoolsColumns = (
           showTitle: false
         },
         span: 4,
-        style: {
-          paddingLeft: 62
-        },
         render: (text: string, record: ListItem) => (
           <AutoTooltip
             title={
@@ -98,9 +92,6 @@ const usePoolsColumns = (
         ellipsis: {
           showTitle: false
         },
-        style: {
-          paddingLeft: 56
-        },
         render: (text: string) => (
           <AutoTooltip
             title={
@@ -125,9 +116,6 @@ const usePoolsColumns = (
         dataIndex: 'replicas',
         span: 6,
         key: 'replicas',
-        style: {
-          paddingLeft: 50
-        },
         editable: {
           valueType: 'number',
           title: intl.formatMessage({ id: 'models.table.replicas.edit' })
@@ -165,9 +153,6 @@ const usePoolsColumns = (
         ellipsis: {
           showTitle: false
         },
-        style: {
-          paddingLeft: 42
-        },
         render: (text: string) => (
           <AutoTooltip ghost minWidth={20}>
             {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -179,9 +164,6 @@ const usePoolsColumns = (
         key: 'operations',
         dataIndex: 'operations',
         span: 3,
-        style: {
-          paddingLeft: 36
-        },
         render: (text: string, record: ListItem) => (
           <DropdownButtons
             items={actionItems}

src/pages/llmodels/components/instance/instance-item.tsx

@@ -1,6 +1,5 @@
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-import { AutoTooltip, RowChildren } from '@gpustack/core-ui';
+import { AutoTooltip, ExpandedRowGrid } from '@gpustack/core-ui';
-import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ModelInstanceListItem } from '../../config/types';
@@ -11,11 +10,17 @@ import DistributeInfoCell from '../instance-cells/distribute-info-cell';
 import DownloadingStatusCell from '../instance-cells/downloading-status-cell';
 import InstanceStatusCell from '../instance-cells/instance-status-cell';
 import NameCell from '../instance-cells/name-cell';
+
 interface InstanceItemProps {
   instanceData: ModelInstanceListItem;
   workerList: WorkerListItem[];
   modelData?: any;
   defaultOpenId: string;
+  // Column grid shared from the parent SealTable so this child row aligns
+  // its cells to the parent columns instead of guessing paddings.
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
   handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }
 
@@ -24,79 +29,67 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   workerList,
   modelData,
   defaultOpenId,
+  gridTemplate,
+  prefixWidth = 0,
+  columns,
   handleChildSelect
 }) => {
+  // The child row shares the parent's column grid; cells flow left-to-right and
+  // only declare a span, so there is no dependency on parent column keys.
+  // Parent layout: name (1) | middle plugin/source region | replicas,
+  // created_at, operation (last 3). The middle absorbs whatever columns sit
+  // between name and replicas (cluster_id, source, any plugin column).
+  const columnCount = columns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 4, 1);
+
   return (
-    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
+    <ExpandedRowGrid
-      <RowChildren>
+      gridTemplate={gridTemplate}
-        <Row
+      prefixWidth={prefixWidth}
-          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
+      style={{ color: 'var(--ant-color-text-secondary)' }}
-          align="middle"
+    >
-        >
+      <ExpandedRowGrid.Cell span={1}>
-          <Col
+        <NameCell
-            span={6}
+          record={instanceData}
-            style={{
+          modelData={modelData}
-              paddingInline: 'var(--ant-table-cell-padding-inline)'
+          defaultOpenId={defaultOpenId}
-            }}
+        ></NameCell>
-          >
+      </ExpandedRowGrid.Cell>
-            <NameCell
+      <ExpandedRowGrid.Cell
-              record={instanceData}
+        span={middleSpan}
-              modelData={modelData}
+        style={{ flexWrap: 'wrap', gap: 8 }}
-              defaultOpenId={defaultOpenId}
+      >
-            ></NameCell>
+        <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
-          </Col>
+        <DistributeInfoCell
-          <Col span={7}>
+          record={instanceData}
-            <span
+          workerList={workerList}
-              style={{
+        ></DistributeInfoCell>
-                paddingLeft: '58px',
+      </ExpandedRowGrid.Cell>
-                flexWrap: 'wrap',
+      <ExpandedRowGrid.Cell span={1} style={{ gap: 4 }}>
-                gap: '8px'
+        <InstanceStatusCell
-              }}
+          record={instanceData}
-              className="flex align-center"
+          onSelect={handleChildSelect}
-            >
+        />
-              <CPUOffloadingCell record={instanceData}></CPUOffloadingCell>
+        <DownloadingStatusCell
-              <DistributeInfoCell
+          backend={modelData?.backend}
-                record={instanceData}
+          distributed_servers={instanceData.distributed_servers}
-                workerList={workerList}
+          workerList={workerList}
-              ></DistributeInfoCell>
+          record={instanceData}
-            </span>
+        ></DownloadingStatusCell>
-          </Col>
+      </ExpandedRowGrid.Cell>
-          <Col span={4}>
+      <ExpandedRowGrid.Cell span={1}>
-            <span
+        <AutoTooltip ghost>
-              style={{ paddingLeft: '40px', gap: 4 }}
+          {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              className="flex-center"
+        </AutoTooltip>
-            >
+      </ExpandedRowGrid.Cell>
-              <InstanceStatusCell
+      <ExpandedRowGrid.Cell span={1}>
-                record={instanceData}
+        <ActionsCell
-                onSelect={handleChildSelect}
+          record={instanceData}
-              />
+          modelData={modelData}
-              <DownloadingStatusCell
+          onSelect={handleChildSelect}
-                backend={modelData?.backend}
+        ></ActionsCell>
-                distributed_servers={instanceData.distributed_servers}
+      </ExpandedRowGrid.Cell>
-                workerList={workerList}
+    </ExpandedRowGrid>
-                record={instanceData}
-              ></DownloadingStatusCell>
-            </span>
-          </Col>
-          <Col span={4}>
-            <span style={{ paddingLeft: 43 }} className="flex">
-              <AutoTooltip ghost>
-                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              </AutoTooltip>
-            </span>
-          </Col>
-          <Col span={3}>
-            <div style={{ paddingLeft: 36 }}>
-              <ActionsCell
-                record={instanceData}
-                modelData={modelData}
-                onSelect={handleChildSelect}
-              ></ActionsCell>
-            </div>
-          </Col>
-        </Row>
-      </RowChildren>
-    </div>
   );
 };
 export default InstanceItem;

src/pages/llmodels/components/instance/instances.tsx

@@ -17,6 +17,9 @@ interface InstanceItemProps {
   workerList: WorkerListItem[];
   modelData?: any;
   currentExpanded?: string;
+  gridTemplate?: string;
+  prefixWidth?: number;
+  columns?: any[];
   handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }
 
@@ -25,6 +28,9 @@ const Instances: React.FC<InstanceItemProps> = ({
   workerList,
   modelData,
   currentExpanded,
+  gridTemplate,
+  prefixWidth,
+  columns,
   handleChildSelect
 }) => {
   const [firstLoad, setFirstLoad] = React.useState(true);
@@ -55,6 +61,9 @@ const Instances: React.FC<InstanceItemProps> = ({
             instanceData={item}
             defaultOpenId={firstLoad ? defaultOpenId : ''}
             handleChildSelect={handleChildSelect}
+            gridTemplate={gridTemplate}
+            prefixWidth={prefixWidth}
+            columns={columns}
           ></InstanceItem>
         );
       })}

src/pages/llmodels/components/table-list.tsx

@@ -441,6 +441,9 @@ const Models: React.FC<ModelsProps> = ({
           modelData={options.parent}
           workerList={workerList}
           handleChildSelect={handleChildSelect}
+          gridTemplate={options.gridTemplate}
+          prefixWidth={options.prefixWidth}
+          columns={options.columns}
         ></Instances>
       );
     },

src/pages/model-routes/components/route-targets.tsx

@@ -2,24 +2,19 @@ import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { DeleteOutlined } from '@ant-design/icons';
 import {
   AutoTooltip,
+  ChildGridOptions,
   DropdownButtons,
-  RowChildren,
+  ExpandedRowGrid,
   StatusTag
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { Col, Row, Tag } from 'antd';
+import { Tag } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
 import styled from 'styled-components';
 import { TargetStatus, TargetStatusLabelMap } from '../config';
 import { RouteTarget } from '../config/types';
 
-const CellContent = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-`;
-
 const FilesTag = styled(Tag)`
   cursor: pointer;
   display: flex;
@@ -29,20 +24,33 @@ const FilesTag = styled(Tag)`
   border-radius: 12px;
 `;
 
-interface ProviderModelProps {
+type SharedGrid = Pick<
+  ChildGridOptions,
+  'gridTemplate' | 'prefixWidth' | 'columns'
+>;
+
+interface ProviderModelProps extends SharedGrid {
   dataList: RouteTarget[];
   onSelect: (val: any, record: any) => void;
   sourceModels: any[];
   modelList?: Global.BaseOption<number>[];
 }
 
-interface TargetItemProps {
+interface TargetItemProps extends SharedGrid {
   onSelect: (val: any, record: any) => void;
   data: any;
   sourceModels: any[];
   modelList?: Global.BaseOption<number>[];
 }
 
+// Sub-column inside the merged `targets` cell.
+const subCellStyle: React.CSSProperties = {
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  paddingInline: 'var(--ant-table-cell-padding-inline)'
+};
+
 export const childActionList = [
   {
     key: 'delete',
@@ -58,10 +66,24 @@ const RouteItem: React.FC<TargetItemProps> = ({
   onSelect,
   data,
   sourceModels,
-  modelList
+  modelList,
+  gridTemplate,
+  prefixWidth = 0,
+  columns
 }) => {
   const intl = useIntl();
 
+  // The child row shares the parent's column grid. Cells flow left-to-right,
+  // so each cell only declares how many parent columns it spans. Parent layout
+  // is always: name (1) | middle plugin region | created_at (1) | operations (1).
+  // Enterprise inserts plugin columns (org, quota) into the middle region.
+  const columnCount = columns?.length ?? 0;
+  const middleSpan = Math.max(columnCount - 3, 1);
+  // With ≥3 middle tracks (enterprise: org / targets / quota) give source,
+  // weight and status their own tracks; source pins to the first middle track,
+  // status to the last, weight absorbs whatever is between.
+  const splitMiddle = middleSpan >= 3;
+
   const renderProviderSource = () => {
     const model = sourceModels.find((item: any) => {
       if (data.model_id) {
@@ -83,88 +105,82 @@ const RouteItem: React.FC<TargetItemProps> = ({
       </span>
     );
   };
+
+  const sourceNode = renderProviderSource();
+  const weightNode =
+    data.fallback_status_codes && data.fallback_status_codes?.length > 0 ? (
+      <>
+        {data.weight > 0 && <span style={{ marginInline: 8 }}>/</span>}
+        <span>{intl.formatMessage({ id: 'routes.table.label.fallback' })}</span>
+      </>
+    ) : (
+      <AutoTooltip ghost>
+        {intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
+        {data.weight || 0}
+      </AutoTooltip>
+    );
+  const statusNode = (
+    <StatusTag
+      statusValue={{
+        status: TargetStatus[data.state],
+        text: TargetStatusLabelMap[data.state],
+        message: ''
+      }}
+    />
+  );
+
   return (
-    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
+    <ExpandedRowGrid
-      <RowChildren>
+      gridTemplate={gridTemplate}
-        <Row
+      prefixWidth={prefixWidth}
-          gutter={16}
+      style={{ color: 'var(--ant-color-text-secondary)' }}
-          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
+    >
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%', gap: 4 }}>
+        <AutoTooltip ghost>{data.name}</AutoTooltip>
+        {!!data.overridden_model_name && !!data.model_id && (
+          <FilesTag color="purple" variant="outlined">
+            <span style={{ opacity: 1 }}>LoRA</span>
+          </FilesTag>
+        )}
+      </ExpandedRowGrid.Cell>
+      {splitMiddle ? (
+        // Enterprise: org / targets / quota → one track each.
+        <>
+          <ExpandedRowGrid.Cell span={1}>{sourceNode}</ExpandedRowGrid.Cell>
+          <ExpandedRowGrid.Cell span={middleSpan - 2}>
+            {weightNode}
+          </ExpandedRowGrid.Cell>
+          <ExpandedRowGrid.Cell span={1}>{statusNode}</ExpandedRowGrid.Cell>
+        </>
+      ) : (
+        // Only `targets` exists: share the one track via a 5:2:3 sub-grid.
+        // A raw grid div (not <Cell>) because it needs `display: grid`.
+        <div
+          style={{
+            gridColumn: `span ${middleSpan}`,
+            minWidth: 0,
+            display: 'grid',
+            gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr)',
+            alignItems: 'center'
+          }}
         >
-          <Col span={5}>
+          <div style={subCellStyle}>{sourceNode}</div>
-            <CellContent
+          <div style={subCellStyle}>{weightNode}</div>
-              style={{
+          <div style={subCellStyle}>{statusNode}</div>
-                gap: 4,
+        </div>
-                paddingInline: 'var(--ant-table-cell-padding-inline)'
+      )}
-              }}
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
-            >
+        <AutoTooltip ghost minWidth={20}>
-              <AutoTooltip ghost>{data.name}</AutoTooltip>
+          {dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              {!!data.overridden_model_name && !!data.model_id && (
+        </AutoTooltip>
-                <FilesTag color="purple" variant="outlined">
+      </ExpandedRowGrid.Cell>
-                  <span style={{ opacity: 1 }}>LoRA</span>
+      <ExpandedRowGrid.Cell span={1} style={{ height: '100%' }}>
-                </FilesTag>
+        <DropdownButtons
-              )}
+          items={childActionList}
-            </CellContent>
+          onSelect={(val) => onSelect(val, data)}
-          </Col>
+        ></DropdownButtons>
-          <Col span={5} style={{ paddingLeft: 64 }}>
+      </ExpandedRowGrid.Cell>
-            <CellContent>{renderProviderSource()}</CellContent>
+    </ExpandedRowGrid>
-          </Col>
-          <Col span={2}>
-            <CellContent>
-              {data.fallback_status_codes &&
-              data.fallback_status_codes?.length > 0 ? (
-                <>
-                  {data.weight > 0 && (
-                    <span style={{ marginInline: 8 }}>/</span>
-                  )}
-                  <span>
-                    {intl.formatMessage({
-                      id: 'routes.table.label.fallback'
-                    })}
-                  </span>
-                </>
-              ) : (
-                <AutoTooltip ghost>
-                  {intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
-                  {data.weight || 0}
-                </AutoTooltip>
-              )}
-            </CellContent>
-          </Col>
-          <Col span={3}>
-            <CellContent>
-              <AutoTooltip ghost>
-                <StatusTag
-                  statusValue={{
-                    status: TargetStatus[data.state],
-                    text: TargetStatusLabelMap[data.state],
-                    message: ''
-                  }}
-                />
-              </AutoTooltip>
-            </CellContent>
-          </Col>
-          <Col span={5}>
-            <CellContent style={{ paddingLeft: 45 }}>
-              <AutoTooltip ghost minWidth={20}>
-                {dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
-              </AutoTooltip>
-            </CellContent>
-          </Col>
-          <Col span={4}>
-            <CellContent
-              style={{
-                paddingLeft: 38
-              }}
-            >
-              <DropdownButtons
-                items={childActionList}
-                onSelect={(val) => onSelect(val, data)}
-              ></DropdownButtons>
-            </CellContent>
-          </Col>
-        </Row>
-      </RowChildren>
-    </div>
   );
 };
 
@@ -172,7 +188,10 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
   dataList,
   onSelect,
   modelList,
-  sourceModels
+  sourceModels,
+  gridTemplate,
+  prefixWidth,
+  columns
 }) => {
   return (
     <div>
@@ -183,6 +202,9 @@ const RouteTargets: React.FC<ProviderModelProps> = ({
           onSelect={onSelect}
           sourceModels={sourceModels}
           modelList={modelList}
+          gridTemplate={gridTemplate}
+          prefixWidth={prefixWidth}
+          columns={columns}
         ></RouteItem>
       ))}
     </div>

src/pages/model-routes/hooks/use-routes-columns.tsx

@@ -232,7 +232,7 @@ const useAccessColumns = ({
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
         sorter: tableSorter(6),
-        span: createTimeSpan,
+        width: 180,
         render: (value: string) => (
           <AutoTooltip ghost minWidth={20}>
             {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}

src/pages/model-routes/index.tsx

@@ -291,6 +291,9 @@ const ModelRoutes: React.FC = () => {
         dataList={list}
         onSelect={onChildSelect}
         sourceModels={sourceModels}
+        gridTemplate={options.gridTemplate}
+        prefixWidth={options.prefixWidth}
+        columns={options.columns}
       />
     );
   };