牧风夕大佬

类似element-plus table组件；支持列宽度设置，以及嵌套表格

问题：

在不设置固定宽度的情况下，每列宽度如何对齐；
固定前n列或后几列如何实现；（fixed：left | right）；
minWidth, maxWidth, width等属性
虚拟滚动；

TableWidget

javascript

import { DotLoading } from 'antd-mobile';
import { DownOutline, UpOutline } from 'antd-mobile-icons';
import React, { CSSProperties, ReactNode } from 'react';
import './table.less';

// 列配置接口
interface Column<T = any> {
  key: string;
  title: string;
  isExpandable?: boolean;
  width?: string | number;
  render?: (row: T) => React.ReactNode;
}

// 表格组件Props接口
interface TableWidgetProps<T = any> {
  columns: Column<T>[];
  data: T[];
  children?: ReactNode;
  expandedRow?: string | null;
  loading?: boolean;
  showEmpty?: boolean;
  showLoading?: boolean;
  setExpandedRow?: (id: string | null) => void;
  expandRender?: (row: { data: T }) => ReactNode;
  onExpandRow?: (row: T, index: number) => void;
  onRowClick?: (row: T) => void;
}

const TableWidget = <T extends { id: string }>({
  columns,
  data,
  expandedRow,
  loading = false,
  showEmpty = false,
  showLoading = false,
  setExpandedRow = () => {},
  expandRender = () => <></>,
  onExpandRow = () => {},
  onRowClick = () => {},
}: TableWidgetProps<T>) => {
  // 处理行展开
  const handleRowExpand = (e: React.MouseEvent, row: T, index: number) => {
    e.stopPropagation();
    setExpandedRow(expandedRow === row.id ? null : row.id);
    onExpandRow(row, index);
  };

  const getColumnStyle = (index, col) => {
    // 粘性布局
    const positionStyle = index === 0 ? 'sticky' : 'static';
    const leftStyle = index === 0 ? 0 : undefined;

    // 处理 flex 样式
    let flexStyle: {
      minWidth: string;
      maxWidth: string;
      width: string | number;
      flexGrow: number;
      flexShrink: number;
    } = {
      minWidth: 'auto',
      maxWidth: 'auto',
      width: 'auto',
      flexGrow: 1,
      flexShrink: 1,
    };
    if (col?.width) {
      flexStyle.maxWidth = `${typeof col.width === 'number' ? `${col.width}px` : col.width}`;
      flexStyle.minWidth = `${typeof col.width === 'number' ? `${col.width}px` : col.width}`;
      flexStyle.flexGrow = 0;
      flexStyle.flexShrink = 0;
    } else {
      flexStyle.width = 0;
      flexStyle.minWidth = '120px';
    }

    return {
      position: positionStyle,
      left: leftStyle,
      background: '#fff',
      ...flexStyle,
    } as CSSProperties;
  };

  // 渲染表头
  const renderHeader = () => (
    <div className="table-header">
      {columns.map((col, index) => (
        <div
          className={col.isExpandable ? 'table-col__expand' : ''}
          style={getColumnStyle(index, col)}
          key={col.key}
        >
          {col.title}
        </div>
      ))}
    </div>
  );

  // 渲染单元格内容
  const renderCell = (col: Column<T>, row: T, index: number) => {
    if (col?.render) {
      return col.render(row);
    }
    return (
      <span className="table-col__span">
        {col.key === 'index' ? index + 1 : (row[col.key as keyof T] as string)}
      </span>
    );
  };

  // 渲染展开图标
  const renderExpandIcon = (row: T, index: number) => (
    <span
      className={expandedRow === row.id ? 'expand-icon__active expand-icon' : 'expand-icon'}
      onClick={(e) => handleRowExpand(e, row, index)}
    >
      {expandedRow === row.id ? <DownOutline fontSize={12} /> : <UpOutline fontSize={12} />}
    </span>
  );

  // 渲染数据行
  const renderRows = () => (
    <>
      {data?.map((row, index) => (
        <React.Fragment key={row.id + '$' + index}>
          <div className="table-row">
            {columns.map((col, _i) => (
              <div
                key={col.key + row.id}
                className={col.isExpandable ? 'table-col__expand' : ''}
                style={getColumnStyle(_i, col)}
                onClick={() => onRowClick(row)}
              >
                {col.isExpandable && renderExpandIcon(row, index)}
                {renderCell(col, row, index)}
              </div>
            ))}
          </div>
          {expandedRow === row.id && (
            <div className="table-row-expand">{expandRender({ data: row })}</div>
          )}
        </React.Fragment>
      ))}
    </>
  );

  // 渲染空状态
  const renderEmpty = () => (
    <div
      style={{
        width: '100%',
        background: '#fff',
        fontSize: '12px',
        textAlign: 'center',
        lineHeight: '32px',
        color: '#919495',
      }}
    >
      暂无数据
    </div>
  );

  // 渲染加载状态
  const renderLoading = () => (
    <div style={{ textAlign: 'center', background: '#fff' }}>
      <DotLoading color="primary" />
    </div>
  );

  return (
    <div className="table-box">
      <div className="table-container__wrapper">
        {renderHeader()}
        {!data?.length && !loading && showEmpty && renderEmpty()}
        {loading && !data?.length && showLoading && renderLoading()}
        {data?.length > 0 && renderRows()}
      </div>
    </div>
  );
};

export default TableWidget;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

table.less

less

.table-box {
  width: 100%;
  overflow: auto;
}
.table-container__wrapper {
  float: left;
  min-width: 100%;
}

.table-header,
.table-row {
  display: flex;
  clear: both;
  min-width: 100%;
  color: #919495;
  background: #fff;
  border-bottom: 1px solid #f6f6f6;
  transition: all 0.3s ease;

  > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    * {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.table-header {
  font-weight: 500;
}

.table-row {
  color: #4f4e59;
  & > div {
    align-self: center;
  }
}

.table-row-expand {
  background: #f3f3f3;
}
.table-col__expand {
  display: flex;

  align-items: center;
  justify-content: flex-start;
}

.expand-icon {
  display: inline-block;

  text-align: center;
  background: #f7f8fa;
}
.expand-icon__active {
  color: #4d8ded;
  background: rgba(77, 141, 237, 0.12);
}

@media screen and (orientation: portrait) {
  .table-header,
  .table-row {
    font-size: 12px;
    > div {
      padding: 6px;
    }
  }

  .table-row-expand {
    padding: 4px;
  }

  .table-col__expand {
    gap: 3px;
    min-width: 50px;
    max-width: 50px;
    box-shadow: 5px 0 5px #f6f6f6;
  }
  .table-col__span {
    font-size: 12px !important;
  }

  .expand-icon {
    padding: 3px 4px;
    line-height: 6px;
    border-radius: 3px;
  }
}

@media screen and (orientation: landscape) {
  .table-header,
  .table-row {
    font-size: 12px;
    > div {
      padding: 6px;
    }
  }

  .table-row-expand {
    padding: 4px;
  }

  .table-col__expand {
    gap: 3px;
    min-width: 50px;
    max-width: 50px;
    box-shadow: 5px 0 5px #f6f6f6;
  }

  .table-col__span {
    font-size: 12px !important;
  }

  .expand-icon {
    padding: 3px 4px;
    line-height: 6px;
    border-radius: 3px;
  }
}

使用示例

less

<TableWidget
  data={tableData}
  loading={loading}
  columns={}
  expandedRow={expandRow}
  setExpandedRow={setExpandRow}
  onRowClick={(row) => handleClickRow(row)}
  onExpandRow={(row) => handleExpandRow(row)}
  expandRender={(row) => (
    <TableWidget
      data={row.data.expandData}
      loading={expandTableLoading}
      showLoading={true}
      showEmpty={true}
      columns={taskColumns}
      onRowClick={(row) => handleClickRow(row)}
    ></TableWidget>
  )}
></TableWidget>

问题： ​

TableWidget ​

使用示例 ​

问题：

TableWidget

使用示例