More than 3 years have passed since last update.

[antd] TableのColumnやColumnGroupは（現在）ただの印である

Last updated at 2022-01-28Posted at 2022-01-27

この記事は2022年1月現在なので、将来変わるかもしれません

Tableの`Column`や`ColumnGroup`

Ant DesignのTableを使う際に、ColumnやColumnGroupを使いますが、

Since this is just a syntax sugar for the prop columns, you can't compose Column and ColumnGroup with other Components.

jsxで記述する Column や ColumnGroupはわかりやすさのために中身がない糖衣構文的なコンポーネントである。

つまり、ただの印であり実装上の意味を持ちません。

（そもそも昔はjsxで記述するものではなくオブジェクトで記述するものだったため？）

例えば公式サンプルのこの例

ですが、

すべて div タグに書き換えても同じように動きます。

Ant Designというより、さらに依存している react-component/table の仕様にはなるのですが、

ここの部分で key と props だけ取り出していることがわかります。

コンポーネント名を活かすならtypeなども活用されるはずです。

つまり、jsxのpropsやchildren（子要素）があるかどうかだけに影響されるのです。

別にそういうこともあるよねくらいの気持ちでも良いのですが、

これでできないことは列に対するカスタムコンポーネントが作れなくなります。

実用上だと列を動的に生成したいなどでこのようにすることもあると思います。

export const CustomColomn = () => {
  return <Column title="Age" dataIndex="age" key="age" />
}

のように作ってjsxで使っても、何も表示されなくなります。

忘れやすいですがカスタムコンポーネントは、処理の分離だけできるというわけでなく

実装上はもちろん CustomColomn というコンポーネントを1段階挟んでいて propsなどは空になっているのです。

ちなみに、

<Table dataSource={data}>
    {CustomColomn()}
</Table>,

のように関数呼び出しにすれば大丈夫ではありますが、これが良いかどうかは..皆さんのご判断で

propsも設定すると大丈夫にはなりますが、
カスタムコンポーネントを使って分離する意義が少し薄れます。

<Table dataSource={data}>
    <CustomColumn title="Age" dataIndex="age" key="age"  />
</Table>,

mapを使って動的に列の数も増やすという場合

こういうコンポーネントを使っても何も出ないということになります。

export const CustomColomns = () => {
  return [1, 2, 3].map((v) => <Column title={"param" + v} />);
};

なので動的に列を増やしたいときは Table直下にコンポーネントを経由せずにmapを書かないといけないと思います。

<Table dataSource={data}>
    {[1, 2, 3].map((v) => (
      <Column title={"param" + v} />
    ))}
</Table>,

Columnや ColumnGroupは、実装上は意味を持たないものである。
ですが、将来仕様が変わるかもしれないのでもちろんこれらを使うべきである。

処理の分離するときにカスタムコンポーネントをよく使うが、1段挟まれるので、
等価ではなく意図しない挙動になるかもしれないという考慮には入れておく。
（おそらく大抵は大丈夫だと思うが）
このコンポーネント以外にもこういうのはあるかもしれないです。