DataTable

import { useState } from 'react';
import { DataTable } from '@/components/polaris';

const orders = [
    { id: '1001', customer: 'Alice', total: '$120.00', status: 'Fulfilled' },
    { id: '1002', customer: 'Bob', total: '$85.50', status: 'Pending' },
    { id: '1003', customer: 'Carol', total: '$200.00', status: 'Fulfilled' },
];

function Example() {
    const [selectedIds, setSelectedIds] = useState<string[]>([]);

    return (
        <DataTable
            data={orders}
            getRowId={(o) => o.id}
            columns={[
                { key: 'id', header: 'Order', cell: (o) => `#${o.id}` },
                { key: 'customer', header: 'Customer', cell: (o) => o.customer },
                { key: 'total', header: 'Total', cell: (o) => o.total, align: 'end' },
                { key: 'status', header: 'Status', cell: (o) => o.status },
            ]}
            selectable
            selectedIds={selectedIds}
            onSelectionChange={setSelectedIds}
        />
    );
}