neuro-shopify-polaris-ui

Combine IndexTable with IndexFilters inside a Card with padding set to zero. Use useIndexResourceState for selection, useSetIndexFiltersMode for filter mode, and pass sortOptions, filters, appliedFilters, and bulkActions to the respective components.

Import the Polaris stylesheet via the links export using the ?url suffix, then wrap your Outlet in AppProvider with i18n translations from @shopify/polaris/locales. Import the CSS only once at the root level and never nest AppProviders except inside modal iframes.

Use IndexTable for structured tabular data with columns such as products or orders. Use ResourceList for less structured items with rich media like blog posts or apps, where each row is rendered via ResourceItem with custom content.

Yes, IndexFilters supports tabs as saved views with canCreateNewView and onCreateNewView for creating views, plus tab actions for rename, duplicate, delete, and edit. The first tab is typically locked as the default All view.

The most common cause is missing AppProvider wrapping or a missing CSS import. All Polaris components must be descendants of AppProvider with i18n translations, and the Polaris stylesheet must be loaded once at the root.

Use the useBreakpoints hook to detect screen sizes like smDown and pass condensed to IndexTable on small screens. Define responsive columns in InlineGrid with breakpoint objects such as columns set per xs and md.