Skip to main content

Table

Storybook

To implement Table component into your project you'll need to add the import:

import { Table } from "@shoptet/ui";

After adding import into your project you can use it simply like:

const rows = [
  { name: "Frozen yoghurt", calories: 159, fat: 6, carbs: 24, protein: 4 },
  {
    name: "Ice cream sandwich",
    calories: 237,
    fat: 9,
    carbs: 37,
    protein: 4.3,
  },
  { name: "Eclair", calories: 262, fat: 16, carbs: 24, protein: 6 },
  { name: "Cupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
];

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>Dessert (100g serving)</TableCell>
      <TableCell>Calories</TableCell>
      <TableCell>Fat (g)</TableCell>
      <TableCell>Carbs (g)</TableCell>
      <TableCell>Protein (g)</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((row, index) => (
      <TableRow key={index}>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.calories}</TableCell>
        <TableCell>{row.fat}</TableCell>
        <TableCell>{row.carbs}</TableCell>
        <TableCell>{row.protein}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>;