手搓好的组件案例，拿去

interface TableColumn {
  key: string;
  title: string;
  flex: number;
  align: TextAlign;
}

interface TableRow {
  name: string;
  age: number;
  city: string;
  job: string;
}

@Entry
@ComponentV2
struct Table {
  private readonly horizontalGap: number = 8;
  private readonly verticalGap: number = 6;
  @Local columns: TableColumn[] = [
    {
      key: 'name',
      title: '姓名',
      flex: 2,
      align: TextAlign.Start
    },
    {
      key: 'age',
      title: '年龄',
      flex: 1,
      align: TextAlign.Center
    },
    {
      key: 'city',
      title: '城市',
      flex: 2,
      align: TextAlign.Start
    },
    {
      key: 'job',
      title: '职位',
      flex: 2,
      align: TextAlign.Start
    }
  ];
  @Local rows: TableRow[] = [
    {
      name: '张三',
      age: 28,
      city: '深圳',
      job: '开发工程师'
    },
    {
      name: '李四',
      age: 32,
      city: '上海',
      job: '产品经理'
    },
    {
      name: '王五',
      age: 26,
      city: '北京',
      job: '测试工程师'
    },
    {
      name: '赵六',
      age: 30,
      city: '广州',
      job: '设计师'
    },
    {
      name: '周七',
      age: 35,
      city: '杭州',
      job: '架构师'
    }
  ];

  build(): void {
    Column({ space: this.verticalGap }) {
      this.renderHeader();
      List({ space: this.verticalGap }) {
        ForEach(this.rows, (row: TableRow, index: number) => {
          ListItem() {
            this.renderRow(row, index);
          }
          .padding({
            top: 10,
            bottom: 10,
            left: 12,
            right: 12
          })
          .backgroundColor(index % 2 === 0 ? '#F7F8FA' : Color.White);
        }, (row: TableRow, index: number) => `${row.name}-${index}`);
      }
      .cachedCount(5)
      .edgeEffect(EdgeEffect.Spring)
      .height('80%');
    }
    .padding(16)
    .backgroundColor(Color.White);
  }

  /**
   * 渲染表头。
   */
  @Builder
  renderHeader(): void {
    Row({ space: this.horizontalGap }) {
      ForEach(this.columns, (column: TableColumn) => {
        Row() {
          Text(column.title)
            .fontWeight(FontWeight.Medium)
            .fontColor(Color.White)
            .textAlign(column.align);
        }
        .layoutWeight(column.flex)
        .justifyContent(this.getCellAlign(column.align))
        .height(36);
      }, (column: TableColumn) => column.key);
    }
    .padding({ left: 12, right: 12 })
    .backgroundColor('#3451F1')
    .borderRadius(10);
  }

  /**
   * 渲染单行数据。
   */
  @Builder
  renderRow(row: TableRow, index: number): void {
    Row({ space: this.horizontalGap }) {
      ForEach(this.columns, (column: TableColumn) => {
        Row() {
          Text(this.getCellContent(row, column.key))
            .fontColor(Color.Black)
            .textAlign(column.align)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis });
        }
        .layoutWeight(column.flex)
        .justifyContent(this.getCellAlign(column.align));
      }, (column: TableColumn) => `${column.key}-${index}`);
    }
  }

  /**
   * 根据表头配置返回对应的单元格文本。
   */
  private getCellContent(row: TableRow, key: string): string {
    let value: string = '';
    switch (key) {
      case 'name':
        value = row.name;
        break;
      case 'age':
        value = `${row.age}`;
        break;
      case 'city':
        value = row.city;
        break;
      case 'job':
        value = row.job;
        break;
      default:
        value = '';
        break;
    }
    return value;
  }

  /**
   * 将文本对齐方式映射到 Flex 对齐。
   */
  private getCellAlign(align: TextAlign): FlexAlign {
    let cellAlign: FlexAlign = FlexAlign.Start;
    switch (align) {
      case TextAlign.Start:
        cellAlign = FlexAlign.Start;
        break;
      case TextAlign.Center:
        cellAlign = FlexAlign.Center;
        break;
      case TextAlign.End:
        cellAlign = FlexAlign.End;
        break;
      default:
        cellAlign = FlexAlign.Start;
        break;
    }
    return cellAlign;
  }
}