Table

const data = [
  { name: "react", stars: 220000, language: "javascript" },
  { name: "vue", stars: 205000, language: "typescript" },
  { name: "svelte", stars: 75000, language: "typescript" },
]

const columns = [
  { key: "name", header: "name" },
  { key: "stars", header: "stars" },
  { key: "language", header: "language" },
]

<Table data={data} columns={columns} />

const columns = [
  { key: "name", header: "name", sortable: true },
  { key: "stars", header: "stars", sortable: true },
  { key: "language", header: "language" },
]

<Table data={data} columns={columns} defaultSort="stars" defaultDirection="desc" />

const columns = [
  { key: "name", header: "name" },
  {
    key: "stars",
    header: "stars",
    render: (value) => `${(value / 1000).toFixed(0)}k`,
  },
  {
    key: "language",
    header: "language",
    render: (value) => <Badge>{value}</Badge>,
  },
];

const columns = [
  { key: "name", header: "name" },
  { key: "stars", header: "stars" },
  { key: "language", header: "language", hideOnMobile: true },
  { key: "license", header: "license", hideOnMobile: true },
];

<Table data={data} columns={columns} striped />

<Table data={data} columns={columns} compact />

const columns = [
  { key: "name", header: "name", width: "200px" },
  { key: "stars", header: "stars", width: "100px" },
];