FROM CACHE - jp_header

index table column (cell) width をカスタマイズしたい

index table column (cell) width をカスタマイズしたい

AppNEWB120
Shopify Partner
2 0 0

アプリ開発を独学で勉強している者です。
この度、調べたりChatGPTを使用しても解決に至りませんでしたので、質問させていただきました。

index Table を使用し商品情報を表示するアプリを開発しています。
セルには色々な情報が表示されますが商品名等、長い情報を表示した際、自動改行やカラム幅をある程度固定したいと思っております。
ただ、cssを読み込みしたり、Tokens を使用してみましたが、全く上手く反映されません。
cssの読み込みにも問題があるかと思い、開発Toolで親Classから指定し background-color や color といった簡単な記述をしても、反映されませんでした。


各カラムの幅や文字の大きさや色等、簡単な装飾でもできればと思っておりますが、どの様な記述が必要、正しいのでしょうか。

index table の下部に記載の IndexTableCell className でスマートに設定出来ないものでしょうか。

<IndexTable.Cell className="custom-class">{date}</IndexTable.Cell>
<IndexTable.Cell className="custom-class">{customer}</IndexTable.Cell>
<IndexTable.Cell className="custom-class">{total}</IndexTable.Cell>
<IndexTable.Cell className="custom-class">{paymentStatus}</IndexTable.Cell>
<IndexTable.Cell className="custom-class">{fulfillmentStatus}</IndexTable.Cell>

の様に。( className="custom-class" )

初歩的な質問かと思いますが、ご教授頂ければ幸いです。

 

--- 環境 ---
shopify version Current Shopify CLI version: 3.48.0
node --version v20.3.1
Typescript

[index table] https://polaris.shopify.com/components/tables/index-table
[Tokens] https://polaris.shopify.com/tokens/color

0件の返信0