Building sortable data tables with Shopify Polaris

const PRODUCTS_QUERY = `#graphql
  query GetProductsWithInventory($first: Int!) {
    products(first: $first, sortKey: TITLE) {
      nodes {
        id
        title
        status
        totalInventory
        variants(first: 50) {
          nodes {
            id
            title
            price
            inventoryQuantity
            sku
          }
        }
      }
    }
  }
` as const;

export async function loader({ request }: LoaderFunctionArgs) {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(PRODUCTS_QUERY, {
    variables: { first: 50 },
  });
  const { data } = await response.json();
  return json({ products: data.products.nodes });
}

import { DataTable, Badge, Page, Card } from '@shopify/polaris';
import { useState, useMemo } from 'react';
import { useLoaderData } from '@remix-run/react';

export default function InventoryTable() {
  const { products } = useLoaderData<typeof loader>();
  const [sortIndex, setSortIndex] = useState(0);
  const [sortDir, setSortDir] = useState<'ascending' | 'descending'>('ascending');

  const rows = useMemo(() => {
    const allRows = products.flatMap((p) =>
      p.variants.nodes.map((v) => ([
        p.title,
        v.title === 'Default Title' ? '—' : v.title,
        v.sku ?? '—',
        v.price,
        v.inventoryQuantity,
        <Badge tone={p.status === 'ACTIVE' ? 'success' : undefined}>
          {p.status.charAt(0) + p.status.slice(1).toLowerCase()}
        </Badge>,
      ]))
    );
    return [...allRows].sort((a, b) => {
      const valA = a[sortIndex];
      const valB = b[sortIndex];
      const cmp = String(valA).localeCompare(String(valB), undefined, { numeric: true });
      return sortDir === 'ascending' ? cmp : -cmp;
    });
  }, [products, sortIndex, sortDir]);

  return (
    <Page title="Inventory">
      <Card padding="0">
        <DataTable
          columnContentTypes={['text','text','text','numeric','numeric','text']}
          headings={['Product','Variant','SKU','Price','Qty','Status']}
          rows={rows}
          sortable={[true, false, false, true, true, false]}
          defaultSortDirection="ascending"
          initialSortColumnIndex={0}
          onSort={(idx, dir) => { setSortIndex(idx); setSortDir(dir); }}
        />
      </Card>
    </Page>
  );
}

import {
  IndexTable, useIndexResourceState, Text,
  Badge, Page, Card
} from '@shopify/polaris';
import { useFetcher, useLoaderData } from '@remix-run/react';

export default function ProductsIndex() {
  const { products } = useLoaderData<typeof loader>();
  const fetcher = useFetcher();

  const {
    selectedResources,
    allResourcesSelected,
    handleSelectionChange,
    clearSelection,
  } = useIndexResourceState(products);

  const promotedBulkActions = [
    {
      content: 'Archive products',
      onAction: () => {
        fetcher.submit(
          { ids: selectedResources.join(',') },
          { method: 'POST', action: '/api/products/archive' }
        );
        clearSelection();
      },
    },
  ];

  const rowMarkup = products.map(({ id, title, status, totalInventory }, idx) => (
    <IndexTable.Row
      id={id}
      key={id}
      selected={selectedResources.includes(id)}
      position={idx}
    >
      <IndexTable.Cell>
        <Text variant="bodyMd" fontWeight="bold" as="span">{title}</Text>
      </IndexTable.Cell>
      <IndexTable.Cell>
        <Badge tone={status === 'ACTIVE' ? 'success' : undefined}>
          {status.charAt(0) + status.slice(1).toLowerCase()}
        </Badge>
      </IndexTable.Cell>
      <IndexTable.Cell>{totalInventory}</IndexTable.Cell>
    </IndexTable.Row>
  ));

  return (
    <Page title="Products">
      <Card padding="0">
        <IndexTable
          resourceName={{ singular: 'product', plural: 'products' }}
          itemCount={products.length}
          selectedItemsCount={allResourcesSelected ? 'All' : selectedResources.length}
          onSelectionChange={handleSelectionChange}
          promotedBulkActions={promotedBulkActions}
          headings={[
            { title: 'Product' },
            { title: 'Status' },
            { title: 'Inventory', alignment: 'end' },
          ]}
        >
          {rowMarkup}
        </IndexTable>
      </Card>
    </Page>
  );
}

import { Filters } from '@shopify/polaris';
import { useState, useMemo } from 'react';

function FilterableProductTable({ products }) {
  const [query, setQuery] = useState('');

  const filtered = useMemo(
    () => products.filter((p) =>
      p.title.toLowerCase().includes(query.toLowerCase())
    ),
    [products, query]
  );

  return (
    <>
      <Filters
        queryValue={query}
        filters={[]}
        onQueryChange={setQuery}
        onQueryClear={() => setQuery('')}
        onClearAll={() => setQuery('')}
      />
      {/* Pass filtered to IndexTable instead of products */}
    </>
  );
}

// app/routes/api.products.archive.tsx
import type { ActionFunctionArgs } from '@shopify/remix-oxygen';

const ARCHIVE_MUTATION = `#graphql
  mutation ArchiveProduct($id: ID!) {
    productUpdate(input: { id: $id, status: ARCHIVED }) {
      product { id status }
      userErrors { field message }
    }
  }
` as const;

export async function action({ request }: ActionFunctionArgs) {
  const { admin } = await authenticate.admin(request);
  const formData = await request.formData();
  const ids = String(formData.get('ids')).split(',').filter(Boolean);

  const results = await Promise.all(
    ids.map((id) =>
      admin.graphql(ARCHIVE_MUTATION, { variables: { id } }).then((r) => r.json())
    )
  );

  const errors = results.flatMap((r) => r.data?.productUpdate?.userErrors ?? []);
  if (errors.length > 0) {
    return json({ success: false, errors }, { status: 422 });
  }
  return json({ success: true, archived: ids.length });
}