Example Live

Editable example of bordered style of the table:
<template>
  <ultimate-table
    class="ultimate-table--custom"
    :items="users"
    :fields="fields"
  >
  </ultimate-table>
</template>

<script lang="ts" setup>
import { generateUsers } from '../utils.ts';

const dateTimeFormatter = new Intl.DateTimeFormat('en', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
});

const users = generateUsers(5);
const fields = [
  {
    key: 'id',
    size: 4,
  },
  {
    key: 'firstName',
    // label: 'First Name', // this is automatically generated if not provided
    size: 10,
    group: '1',
  },
  {
    key: 'lastName',
    label: 'Last Name',
    size: 10,
    group: '1',
  },
  {
    key: 'email',
    label: 'Email',
    size: 21,
    group: '2',
  },
  {
    key: 'memberSince',
    label: 'Member Since',
    size: 15,
    formatter: (value: any) => {
      return dateTimeFormatter.format(value);
    },
    group: '2',
  },
  {
    key: 'role',
    label: 'Role',
    size: 8,
  },
] as const;
</script>

<!-- the style tag is added inside markdown file, as it's not supported inside the live region -->
Example Live ​

Example Live
