Hi all. I’ve noticed that in the Shopify mobile app, the kicker does not always render on my tables. I use a checkbox in the kicker for row selection (not ideal, but we’re still waiting on better options from the component makers), so this impacts the mobile functionality of my app. But the issue is more general – doesn’t seem to matter what the kicker is. The key is that the list/table needs to have a certain length or number of elements.
To reproduce you’ll need the react-router-template and paste this into app.additional.tsx:
interface DemoProduct {
id: string;
name: string;
initials: string;
}
const DEMO_PRODUCTS: DemoProduct[] = [
{
id: "1",
initials: "WH",
name: "Wireless Headphones",
},
{
id: "2",
initials: "UC",
name: "USB-C Cable",
},
];
const expandedDemoProducts: DemoProduct[] = [];
const repeatCount = 12;
for (let i = 0; i < repeatCount; i++) {
expandedDemoProducts.push(...DEMO_PRODUCTS);
}
export default function TableDemo() {
return (
<s-page heading="Table Demo">
<s-section padding="none">
<s-table>
<s-table-header-row>
<s-table-header listSlot="kicker">Icon</s-table-header>
<s-table-header listSlot="primary">Product Name</s-table-header>
</s-table-header-row>
<s-table-body>
{expandedDemoProducts.map((product, index) => (
<s-table-row key={index}>
<s-table-cell>
<s-avatar initials={product.initials} />
</s-table-cell>
<s-table-cell>{product.name}</s-table-cell>
</s-table-row>
))}
</s-table-body>
</s-table>
</s-section>
</s-page>
);
}
Fire up shopify app dev and load the app in your demo store. Navigate to the additional page and you’ll hopefully see:
If you see the avatar, increase the repeatCount to add more rows. I don’t know exactly how consistent this behaviour is. Seems to change/shift with hot reloading. When I drop repeat count to 10 I see the kicker is just missing from the first few rows:
And down with 8 (16 total rows) I see all of the kicker’s rendered.
The same thing happens if we just put text in the kicker, but I find the avatars easier to see. This is all consistent with what I see in my actual app, where the checkboxes might be missing from just the first rows, from all of the rows, or might actually be there in all of them.
Hopefully that’s enough for you all to recreate and get a fix out. Thanks.