Back to Compositions

SimpleTable

Data Display

Declarative read-only table — data in, rows out. No selection or sorting.

Composed from
TableTableHeaderTableBodyTableRowTableCell
Example
ProductPriceStatusBlue T-Shirt$29.99ActiveRed Hoodie$49.99DraftBlack Jeans$59.99Active
Usage
import { SimpleTable } from '@/components/polaris';

const products = [
    { id: '1', name: 'Blue T-Shirt', price: 29.99, status: 'Active' },
    { id: '2', name: 'Red Hoodie', price: 59.99, status: 'Draft' },
];

function Example() {
    return (
        <SimpleTable
            data={products}
            getRowKey={(p) => p.id}
            columns={[
                { key: 'name', header: 'Product', cell: (p) => p.name },
                { key: 'price', header: 'Price', cell: (p) => `$${p.price}`, align: 'end' },
                { key: 'status', header: 'Status', cell: (p) => p.status },
            ]}
        />
    );
}