TreeListTable.tsx

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;