How can I filter a Polaris index table by product collection?

How can I filter a Polaris index table by product collection?

1080
Shopify Partner
297 9 56

Hi, I am building the App there i am using the product info. need to show the store product in to the polaris index table with server side rendering?

I am referring  https://polaris.shopify.com/components/tables/index-table

any one can help.

Replies 4 (4)

Zard
Shopify Partner
12 1 2

You can use GraphQL Admin API to get products data from shopify.

 

export async function loader({ request }) {
    const { admin } = await authenticate.admin(request);
    const response = await admin.graphql(
      `query {
          products(first: 10) {   
            nodes {
              id
              status
              title
              productType
              totalInventory
              variants(first: 10) {
                nodes {
                  id
                  price
                  sku
                  title
                }
              }
              vendor
              description
              images(first: 1) {
                nodes {
                  src
                }
              }
            },
            pageInfo {
              hasNextPage
              endCursor
            }
          }
      }`
    );
    const {
      data: {
        products : {
          nodes
        }
      }
    } = await response.json();
    return json(nodes);
}

 

1080
Shopify Partner
297 9 56

@Zard  Thanks for the solution for code snippets. it was great,
I have more Query
show the store product in to the polaris index table with server side rendering?
1. can please add for the polarish index table data maping ?
2. this is work as server side rending ?
3. how to add the filter in table ?

Zard
Shopify Partner
12 1 2

Yes, it's SSR, based on Remix, you can check the demo of Shopify Polaris, it has code for these functions.

https://polaris.shopify.com/components/tables/index-table 

 

Zard_2-1693012731236.png

 

 

1080
Shopify Partner
297 9 56

@Zard  i try the same code but it was not work for the search. also the demo code it was not working.

do i need to some extra code for search feature ? however i can't find it from the the app docs. 

How I can use it's SSR, based on Remix, on react with polaris can you please add more info ?