はじめに
カラムとデータの間に別のものを挿入したい時があり、transform を使いました。
transform を実装で使ったのは初めてで、感動したので、記事にします。
こんな便利な css があったなんて・・・
やりたいこと
下の画像のように、カラムとデータの間に値を入れたい。
ただ自分の探し方が悪いのか、Ant Design の中にはできそうなオプションがない。
ならば自力でやるしかないと考え、尊敬してる大先生の元で教えてもらいました。
transform とは
transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。
（※引用元ーhttps://developer.mozilla.org/ja/docs/Web/CSS/transform）
指定した要素に変更を加えれるので、より柔軟なレイアウトを作ることが可能になります。
早速実装
①まずは、カラム側を2行にする
②①の赤枠の要素にtransform の css を付与する
transform: scale(-1);
上記のtransformにより、要素の上下左右を反転させます。
③②青枠の要素にtransform の css を付与する
transform: scale(-1);
①の画像と比べてもらうとわかりますが、カラムの上下が逆になります。
使用例
Table の columns prop を使用して、Other の位置に好きな要素を入れることができます。
自分は、左端にチェックボックスを設定し、チェックされている合計をカラムとデータの間に表示させました。
まとめ
まだまだ知らない css がたくさんあると思います。
transform を使えばできると、瞬時に思えるようになりたいです。