FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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