Filter and checkbox for resource list

Karthik_tech
Shopify Partner
5 0 1

 

Hi All,

 

The resource list and data table don't have the checkbox which is used to do the actions.

https://polaris.shopify.com/components/lists-and-tables/filters#navigation

 

What are all the components to be used to achieve this design? 

 

resource list.png

achieveapplabs
Shopify Partner
495 39 76

Hi @Karthik_tech ,

 

I believe you want to add selectable property to your ResourceList component like so:

 

      <ResourceList
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        selectedItems={selectedItems}
        onSelectionChange={setSelectedItems}
        selectable
      />

Helpful link: https://polaris.shopify.com/components/lists-and-tables/resource-list

 

Regards,

 

Sam

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
0 Likes
TungDao
Shopify Partner
243 10 33

Hi,

 

Not sure what you're getting at but maybe you can look up some product filter apps?

Avada is an e-commerce solution provider based in the heart of Vietnam where the best developers unite. Founded in 2017 by Mageplaza, Avada is responsible to complete the mission to help 1 million online businesses grow revenues.
0 Likes
TungDao
Shopify Partner
243 10 33

Hi,

 

Not sure what you're trying to get at but maybe you can look up some product filters apps?

Avada is an e-commerce solution provider based in the heart of Vietnam where the best developers unite. Founded in 2017 by Mageplaza, Avada is responsible to complete the mission to help 1 million online businesses grow revenues.
0 Likes

hey @Karthik_tech,

I think you are trying to achieve the look and feel of Shopify Data Grid from the Shopify admin panel.

So, for the resource list, there is CheckBox Option you just have to enable "selectable" true.

<ResourceList
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        selectedItems={selectedItems}
        onSelectionChange={setSelectedItems}
        selectable
      />

and for the Data table, there are no inbuilt checkbox setting in the grid. but you can also achieve this by using Shopify Checkbox, as Shopify Data table takes React node as the input you can Place components like checkbox, Badge, etc, in the data table.

E.g.  for the input array in the data table : 

[
      <Checkbox
      label="Basic checkbox"
      checked={checked}
      onChange={handleChange}
    />,
      '#1546',
      jan 3 at 3:22 am,
      Kapil 111,
     <Badge status="warning">Pending</Badge>,
    <Badge status="attention">Unfulfilled</Badge>
  ]

 

Digital Marketing Analyst and Shopify Front End Developer
CedCommerce
Skype: live:manisharautela_1
Hire Shopify expert Here