Component: Table

[dolanske]

This is the largest PR so far. Over the years I've made a table component many times, but this time it is different. I've always wanted to only import a single prop-less component and define a single object which I will pass to it as a prop. That's it. Whole definition happens outside of the UI code.

Unfortuantely, in Vue this comes at a cost of customization. Since we can't define small atomic sub-components within our SFCs, we need to move part of the setup to the HTML code itself.

---

How it works?

We define table dataset using the defineTable

const data = ref([])

const { rows, pagination, setPage, headers } = defineTable(data, {
  pagination: {
    enabled: true,
    perPage: 5,
  },
  select: true,
})

And we can now define the table UI in the template itself

<Table fixed nowrap separate-cells>
  <template #header>
    <SelectAll />
    <Header v-for="header in headers" :key="header.label" :header="header" sort />
  </template>
  <template #body>
    <Row v-for="(item, index) in rows" :key="index">
      <SelectRow :row="item" />
      <Cell>{{ item.Id }}</Cell>
      <Cell>{{ item.Account }}</Cell>
      <Cell>{{ item.Title }}</Cell>
      <Cell>
        {{ item.RuleId }}
        <template #context>
          <Button size="s" square icon="ph:dots-three-vertical-bold" plain />
        </template>
      </Cell>
    </Row>
  </template>
  <template #pagination>
    <Flex justify-end>
      <Pagination :pagination :numbers="false" @change="setPage" />
    </Flex>
  </template>
</Table>

Which results in this

• Paginated table
• Sortable columns
• Selecting rows
• Context menu

---

The whole idea behind this is that you can write any UI you want. It doesn't even need to be inside a table. Just note that all components exported from the /table folder should be used within the <Table /> component slots.

There are many ways to tweak & update the way the table behaves and looks, but that will be covered in the final documentation later.