tabler/shared/components/demo/Table.astro

---
import { people } from '@shared/lib/people'
import Avatar from '@ui/Avatar.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import DropdownMenu from './DropdownMenu.astro'
import { randomNumber } from '@shared/lib/pseudo-random'

interface Props {
  card?: boolean
  limit?: number
  striped?: boolean
  offset?: number
  avatars?: boolean
  mobile?: boolean
  buttons?: boolean
}

const { card, limit = 5, striped, offset, avatars, mobile, buttons } = Astro.props

const roles = ['User', 'Admin', 'Owner']

const start = offset ?? 0
const rows = people.slice(start, start + limit)

const tableClasses = ['table', 'table-vcenter', mobile && 'table-mobile-md', card && 'card-table', striped && 'table-striped']
---

<div class="table-responsive">
  <table class:list={tableClasses}>
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>

        {!avatars && <th>Email</th>}

        <th>Role</th>

        <th class="w-1"></th>
      </tr>
    </thead>
    <tbody>
      {
        rows.map((person, i) => {
          const role = roles[randomNumber(i + 1, 0, 2)]
          return (
            <tr>
              {avatars ? (
                <td data-label={mobile ? 'Name' : undefined}>
                  <div class="d-flex py-1 align-items-center">
                    <Avatar person={person} class="me-2" />
                    <div class="flex-fill">
                      <div class="fw-medium">{person.full_name}</div>
                      <div class="text-secondary">
                        <a href="#" class="text-reset">
                          {person.email}
                        </a>
                      </div>
                    </div>
                  </div>
                </td>
              ) : (
                <td data-label={mobile ? 'Name' : undefined}>{person.full_name}</td>
              )}

              {avatars ? (
                <td data-label={mobile ? 'Title' : undefined}>
                  <div>{person.job_title}</div>
                  <div class="text-secondary">{person.department}</div>
                </td>
              ) : (
                <td class="text-secondary" data-label={mobile ? 'Title' : undefined}>
                  {person.job_title}, {person.department}
                </td>
              )}

              {!avatars && (
                <td class="text-secondary" data-label={mobile ? 'Email' : undefined}>
                  <a href="#" class="text-reset">
                    {person.email}
                  </a>
                </td>
              )}

              <td class="text-secondary" data-label={mobile ? 'Role' : undefined}>
                {role}
              </td>

              <td>
                {buttons ? (
                  <ButtonList class="flex-nowrap">
                    <Button text="Edit" />
                    <div class="dropdown">
                      <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                        Actions
                      </button>
                      <DropdownMenu right={true} />
                    </div>
                  </ButtonList>
                ) : (
                  <a href="#">Edit</a>
                )}
              </td>
            </tr>
          )
        })
      }
    </tbody>
  </table>
</div>