Skip to main content

Tables

Tables help you see your data in a neat list. In Snappy, you can show any kind of data (like products) in a table with almost no setup.

The Easiest Table Ever​

To show a list of products, just use this:

<BobTable flavor="products" />

This gives you a basic table with all your products. It shows the ID and some basic info.

Make the Table Show What You Want​

Want to see the product name and price instead? Add a little code to pick your columns:

const columns: BobTableColumn[] = [
    { label: "Name", prop: "name" },
    { label: "Price", prop: "price" }
];

Then update your table like this:

<BobTable flavor="products" :columns />

Now your table will show the name and price for each product. That’s it—no complicated setup!