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
import React from 'react';
import style from './attendace.less'
export type ColumnItem = {
key: number;
label: string;
dataIndex?: string;
render?: (text: any, row: any) => React.ReactNode
}
type TreeListTableProps = {
columns: ColumnItem[];
dataSource: any[];
listData: any[]
}
const TreeListTable: React.FC<TreeListTableProps> = (props) => {
const {columns, dataSource, listData} = props
return (
<table className={style.tb}>
<thead>
<tr>
{columns.map(item => (
<th className={style.tb_th} key={item?.key}>{item.label}</th>
))}
</tr>
</thead>
<tbody>
{listData.map(item => dataSource.includes(item.key) && (
<tr key={item.key}>
{columns?.map(columnItem => (
<td className={style.tb_td} key={columnItem?.key}>
{columnItem?.render?.(item[columnItem?.dataIndex || ''], item) || item[columnItem?.dataIndex || '']}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
export default TreeListTable;