جداول بيانات وجداول حسابية لـ Vue.

من مكوّن واحد إلى طبقات

بدأ vueye-table عام 2018 مكوّنَ جدول واحدًا. والإصدار الثالث إعادة كتابة تقوم على فكرة واحدة: الجدول بيانات وحالة وعمليات، أما العرض فمسألة منفصلة. يتولّى محرّك لا يرتبط بأي إطار عمل البحث والترشيح والترتيب وتقسيم الصفحات والتحديد وإظهار الأعمدة وإخفاءها والتحرير والتراجع والنسخ واللصق والتصدير. وفوقه طبقات Vue، تختار منها ما يناسبك.

كل طبقة لا تعتمد إلا على ما تحتها، والحزمة vueye-table تعيد تصدير الطبقات كلها، فتثبيت واحد يكفي لأي مستوى.

أعمدة محدَّدة الأنواع

<script setup lang="ts">
import { defineColumns, type RowKey, VueyeTable } from 'vueye-table'
import { ref } from 'vue'

const columns = defineColumns<User>([
  { id: 'name.first', header: 'First name' },
  { id: 'name.last', header: 'Last name' },
  { id: 'age', align: 'end', format: age => `${age} years` },
  { id: 'city' },
])

const selected = ref<readonly RowKey[]>([])
</script>

<template>
  <VueyeTable v-model:selected="selected" :data="users" :columns="columns" selectable striped>
    <template #cell.city="{ value }">
      <strong>{{ value }}</strong>
    </template>
  </VueyeTable>
</template>

معرّف العمود مسار داخل الصف يعرف TypeScript نوعه، ولهذا تستقبل الدالة format في المثال رقمًا. ولكل جزء من الحالة v-model: الصفحة، وحجمها، والترتيب، والبحث، والمرشّحات، والأعمدة المخفية، والتحديد. وبإضافة manual و row-count يتولّى الخادم البحث والترتيب وتقسيم الصفحات، ويعرض الجدول الصفحة التي تصله.

مكوّن الجدول الحسابي

<VueyeGrid v-model:data="lines" :columns="columns" column-letters />

تُحرَّر الخلايا في مواضعها. الأسهم و Tab و Home و End للتنقّل، و Shift لتوسيع التحديد، و Enter أو الكتابة مباشرة لبدء التحرير، و Delete للمسح. والنسخ والقص واللصق والتراجع والإعادة تعمل كما في برامج الجداول. كل تعديل يُخرج مصفوفة جديدة، والمصفوفة التي مرّرتَها لا تُمسّ. ويُقرأ النص المُدخل بحسب نوع العمود، والقيمة التي تتعذّر قراءتها تُرفض ويُبلَّغ عنها بالحدث edit-error.

المحرّك خارج Vue

import { createTable } from '@vueye-table/core'

const table = createTable({ data: users, columns: [{ id: 'age' }, { id: 'city' }] })
table.search('lon')
table.toggleSort('age')
table.getSnapshot().rows // the current page
table.exportRows() // CSV of every filtered row

الحالة بيانات عادية قابلة للتسلسل، فيمكن حفظها واسترجاعها وإرسالها إلى الخادم أو وضعها في عنوان URL.

إمكانية الوصول والتنسيق

المكوّنات المجرّدة من التنسيق تُخرج ترميزًا دلاليًا فيه aria-sort و aria-selected و aria-rowindex، ومنطقة تُعلن التغييرات لقارئات الشاشة، وتنقّل بلوحة المفاتيح داخل الشبكة. وتعرض حالتها عبر خصائص data-* وخاصيات المنافذ. أما الطبقة المنسّقة فتُضبط بخصائص CSS مخصّصة، وتتبع prefers-color-scheme، ولها ثلاث درجات كثافة: متراصّة ومريحة ورحبة.