web-dev-qa-db-ja.com

AntDを使用してテーブルの列を非表示にします

Antデザインテーブルを使用するためのアレイに既に存在するフロントエンドを表示するためのテーブルから列を非表示にするにはどうすればよいですか。

たとえば、私は私の配列オブジェクトにIDと呼ばれる列を持っていますが、テーブルビューに表示する必要はありません、それはいくつかの参照目的のためにJSONリスト自体に保持されるべきです。

フィドルリンク - この例では、テーブルのID列を表示したくないが、行削除のような参照のIDを使用しました。

antd
5
Jaison

Table 's prop columnsは、テーブルによってどの列がレンダリングされるかを制御するために使用されますが、dataSourceとして使用されるデータの形状に影響を与えません。列を省略してもdataSourceからその値は削除されず、列のrenderプロパティ（例えばコールバックを生成するため）の場合はそれを参照できます。

サンプルコード（hiddenValueは任意の列のdataIndexプロパティによって直接参照されていないため、省略してください）。

const TableWithHiddenColumn = () => {
    const dataSource = [
        { renderedValue: 'foo', hiddenValue: 'id_1' },
        { renderedValue: 'bar', hiddenValue: 'id_2' },
        { renderedValue: 'biz', hiddenValue: 'id_3' },
    ];

    const columns = [
        { title: 'Visible column', dataIndex: 'renderedValue', key: 'renderedValue' },
        {
            title: 'Action',
            key: 'action',
            render: (record) => (
                <Button
                    onClick={() => {
                        console.log(record.hiddenValue);
                    }}
                >
                    {record.hiddenValue}
                </Button>
            ),
        },
    ];

    return <Table columns={columns} dataSource={dataSource} />;
};
 _

結果：

rendered result of above code

1
maktel

列を生成するコードがすでにある場合は、カスタムレンダリングメソッドを実装するよりもはるかに単純なオプションが、単に完了した列リストからそれを絞り込むことです。

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');
 _
1
karfus