ReadyTable Component

The ReadyTable component is a flexible and feature-rich table component for Shopify apps. It's built on top of Shopify Polaris components and provides easy data display with sorting, pagination, and action buttons.

Features

Customizable table headings
Selectable rows
Pagination support
Action buttons (Edit and Delete)
Responsive design

Usage

import ReadyTable from './path/to/readyTable';
 
const MyPage = () => {
  const data = {
    nodes: [
      { id: '1', name: 'Item 1', status: 'active', createdAt: '2023-01-01' },
      { id: '2', name: 'Item 2', status: 'inactive', createdAt: '2023-01-02' },
    ],
    pageInfo: {
      hasNextPage: true,
      hasPreviousPage: false,
      endCursor: 'cursor123',
    },
  };
 
  const headings = [
    { title: 'Name' },
    { title: 'Status' },
    { title: 'Created At' },
    { title: 'Actions' },
  ];
 
  return (
    <ReadyTable
      data={data}
      headings={headings}
      resourceName={{ singular: 'item', plural: 'items' }}
      pagination={true}
      actions={true}
    />
  );
};

Props

Prop	Type	Default	Description
data	Object	Required	The data to display in the table
resourceName	Object	`{ singular: 'item', plural: 'items' }`	Names for the resources in the table
headings	Array	`null`	Custom headings for the table
selectable	Boolean	`true`	Whether rows can be selected
pagination	Boolean	`false`	Whether to show pagination controls
actions	Boolean	`false`	Whether to show action buttons

AppEmbedStatus ReadyProductSelector