tabler/preview/pages/datatables.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { toUnixSeconds, formatLongDate } from '@shared/lib/date-format'
import { randomNumber, randomDate } from '@shared/lib/pseudo-random'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Progress from '@ui/Progress.astro'
import TablerList from '@shared/components/js/TablerList.astro'
import rollercoasters from '@data/rollercoasters.json'

interface Rollercoaster {
  name: string
  city: string
  type: string
  score: string
}

const id = 'default'

const rows = (rollercoasters as Rollercoaster[]).map((rc, i) => {
  const index = i + 1
  const progress = randomNumber(index, 0, 100)
  const date = randomDate(index)
  return {
    rc,
    progress,
    quantity: randomNumber(index, 1, 200),
    dateSeconds: toUnixSeconds(date),
    dateLabel: formatLongDate(date),
  }
})

const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity']
---

<DefaultLayout title="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
  <Card>
    <CardBody class="p-0">
      <div id={`table-${id}`} class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th><button class="table-sort" data-sort="sort-name">Name</button></th>
              <th><button class="table-sort" data-sort="sort-city">City</button></th>
              <th><button class="table-sort" data-sort="sort-type">Type</button></th>
              <th><button class="table-sort" data-sort="sort-score">Score</button></th>
              <th><button class="table-sort" data-sort="sort-date">Date</button></th>
              <th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
              <th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
            </tr>
          </thead>
          <tbody class="table-tbody">
            {
              rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => (
                <tr>
                  <td class="sort-name">{rc.name}</td>
                  <td class="sort-city">{rc.city}</td>
                  <td class="sort-type">{rc.type}</td>
                  <td class="sort-score">{rc.score}</td>
                  <td class="sort-date" data-date={dateSeconds}>
                    {dateLabel}
                  </td>
                  <td class="sort-quantity">{quantity}</td>
                  <td class="sort-progress" data-progress={progress}>
                    <div class="row align-items-center">
                      <div class="col-12 col-lg-auto">{progress}%</div>
                      <div class="col">
                        <Progress value={progress} width="5rem" />
                      </div>
                    </div>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    </CardBody>
  </Card>

  <TablerList id={id} valueNames={valueNames} />
</DefaultLayout>