tabler/shared/ui/AdvancedTable.astro

---
import BadgesList from './BadgesList.astro'
import Icon from './Icon.astro'
import { formatLongDate } from '@shared/lib/date-format'
import { randomNumber, randomItem, randomDate } from '@shared/lib/pseudo-random'
import Avatar from './Avatar.astro'
import Button from './Button.astro'
import ButtonList from './ButtonList.astro'
import Pagination from './Pagination.astro'
import people from '@data/people.json'
import tableProperties from '@data/table-properties.json'
import CaptureScript from '../components/CaptureScript.astro'

interface Props {
  id?: string
}

const { id: tableId = 'advanced-table' } = Astro.props

const statuses = ['Active', 'Inactive', 'Requested']
const perPage = ['10', '20', '50', '100']
const categories = ['Agencies', 'Individual', 'Event', 'Ticket']
const tags = ['QTA,Event,Tickets,TODO', 'Event,Tickets', 'QTA,Event', 'Tickets']

const headers = (tableProperties as Record<string, any>)['advanced-table'].headers as {
  'data-sort': string
  'name': string
}[]

const rows = (people as Record<string, any>[]).map((person, i) => {
  const index = i + 1
  const status = randomItem(index + 5, statuses)
  const itemTags = randomItem(index + 5, tags).split(',')
  const category = randomItem(index, categories)
  const date = formatLongDate(randomDate(index))
  return { person, index, status, itemTags, category, date }
})

const advancedTable = (tableProperties as Record<string, any>)['advanced-table']
const perPageDefault = perPage[1]
---

<div class="card">
  <div class="card-table">
    <div class="card-header">
      <div class="row w-full">
        <div class="col">
          <h3 class="card-title mb-0">Employee</h3>
          <p class="text-secondary m-0">Table description.</p>
        </div>
        <div class="col-md-auto col-sm-12">
          <ButtonList class="ms-auto d-flex flex-wrap">
            <div class="input-group input-group-flat w-auto">
              <span class="input-group-text">
                <Icon name="search" />
              </span>

              <input id={`${tableId}-search`} type="text" class="form-control" autocomplete="off" />

              <span class="input-group-text">
                <kbd>ctrl + K</kbd>
              </span>
            </div>

            <a href="#" class="btn btn-icon" aria-label="Button">
              <Icon name="dots" />
            </a>
            <div class="dropdown">
              <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Download</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Third action</a>
              </div>
            </div>
            <Button />
          </ButtonList>
        </div>
      </div>
    </div>

    <div id={tableId}>
      <div class="table-responsive">
        <table class="table table-vcenter table-selectable">
          <thead>
            <tr>
              <th class="w-1"></th>
              {
                headers.map((header) => (
                  <th>
                    <button class="table-sort d-flex justify-content-between" data-sort={header['data-sort']}>
                      {header.name}
                    </button>
                  </th>
                ))
              }
            </tr>
          </thead>

          <tbody class="table-tbody">
            {
              rows.map(({ person, status, itemTags, category, date }) => (
                <tr>
                  <td>
                    <input class="form-check-input m-0 align-middle table-selectable-check" type="checkbox" aria-label="Select invoice" value="true" />
                  </td>
                  <td class={headers[0]['data-sort']}>
                    <Avatar person={person} size="xs" class="me-2" />
                    {person.full_name}
                  </td>
                  <td class={headers[1]['data-sort']}>
                    {person.city}, {person.country}
                  </td>
                  <td class={headers[2]['data-sort']}>{status === 'Active' ? <span class="badge bg-success-lt">Active</span> : status === 'Inactive' ? <span class="badge bg-danger-lt">Inactive</span> : <span class="badge">Requested</span>}</td>
                  <td class={headers[3]['data-sort']}>{date}</td>
                  <td class={headers[4]['data-sort']}>
                    <BadgesList>
                      {itemTags.map((tag) => (
                        <span class="badge">{tag}</span>
                      ))}
                    </BadgesList>
                  </td>
                  <td class={`${headers[5]['data-sort']} py-0`}>
                    <span class="on-unchecked">{category}</span>
                    <div class="on-checked">
                      <div class="d-flex justify-content-end">
                        <Button icon="dots" iconOnly />
                      </div>
                    </div>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
      <div class="card-footer d-flex align-items-center">
        <div class="dropdown">
          <a class="btn dropdown-toggle" data-bs-toggle="dropdown">
            <span id="page-count" class="me-1">{perPage[1]}</span>
            <span>records</span>
          </a>
          <div class="dropdown-menu">
            {
              perPage.map((record) => (
                <a class="dropdown-item" onclick="setPageListItems(event)" data-value={record}>
                  {record} records
                </a>
              ))
            }
          </div>
        </div>

        <Pagination class="m-0 ms-auto" count={10} />
      </div>
    </div>
  </div>
</div>

<CaptureScript>
  <!-- BEGIN ADVANCED TABLE -->
  <script define:vars={{ tableId, advancedTable, perPageDefault }}>
    // Astro wraps define:vars scripts in an IIFE, so this needs an explicit window
    // assignment to stay reachable from the onclick="setPageListItems(event)" markup below.
    window.setPageListItems = function setPageListItems(e) {
      window.tabler_list[tableId].page = parseInt(e.target.dataset.value)
      window.tabler_list[tableId].update()

      document.querySelector('#page-count').innerHTML = e.target.dataset.value
    }

    function initAdvancedTable() {
      window.tabler_list ??= {}
      const list = (window.tabler_list[tableId] = new List(tableId, {
        sortClass: 'table-sort',
        listClass: 'table-tbody',
        page: parseInt(perPageDefault),
        pagination: {
          item: (value) => `<li class="page-item"><a class="page-link cursor-pointer">${value.page}</a></li>`,
          innerWindow: 1,
          outerWindow: 1,
          left: 0,
          right: 0,
        },
        valueNames: advancedTable.headers.map((header) => header['data-sort']),
      }))

      const searchInput = document.querySelector(`#${tableId}-search`)
      searchInput?.addEventListener('input', () => list.search(searchInput.value))
    }

    document.readyState !== 'loading' ? initAdvancedTable() : document.addEventListener('DOMContentLoaded', initAdvancedTable, { once: true })
  </script>
  <!-- END ADVANCED TABLE -->
</CaptureScript>