React Typescript Antd 表（expandedRowRender）过滤器

Question

I'm trying to filter my Language Lines to each no column, but it just print all Language data into all Lines:

The box marks the only dataitem that should be in the Row:

And this is the Code for the Columns:

const expandedRowRender = () => {
  columns = [
    {
      title: "Sprache",
      key: "no",
      render: () => {
        return (
          <Space direction="vertical">
            <Text>{MediaRecorder.de}</Text>
            <Text>{MediaRecorder.end}</Text>
          </Space>
        );
      },
    },
  ];
  return (
    <Table
      columns={columns}
      dataSource={this.StaticRange.question}
      rowKey={(record) => record.no}
    />
  );
};

Answer 1

expandedRowRenderer has arguments that you can use for filtering your inner table based on parent table data.

const expandedRowRender = (record, index, indent, expanded) => {
  //you can use record here to filter datasource
  columns = [
    {
      title: "Sprache",
      key: "no",
      render: () => {
        return (
          <Space direction="vertical">
            <Text>{MediaRecorder.de}</Text>
            <Text>{MediaRecorder.end}</Text>
          </Space>
        );
      },
    },
  ];
  return (
    <Table
      columns={columns}
      dataSource={this.StaticRange.question}
      rowKey={(record) => record.no}
    />
  );
};