<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'

const fields = ref([
  { key: 'property', label: 'Property' },
  { key: 'type', label: 'Type' },
  { key: 'descr', label: 'Description'},
])
const items = ref([
  { property: 'key', type: 'String', descr: 'The key for selecting data from the record in the items array. This property is required. The key is also used for generating the [custom data rendering](AisTable#custom-data-rendering) and custom header and footer slot names.' },
  { property: 'label', type: 'String', descr: 'Appears in the columns table header (and footer if foot-clone is set).' },
  { property: 'class', type: 'String or Array', descr: 'Class name (or array of class names) to add to `<th>` <b>and</b> `<td>` in the column.' },
  { property: 'sortable', type: 'Boolean', descr: 'Enable sorting on this column. Refer to the Sorting section for more details.' },
  { property: 'icon', type: 'String or Object', descr: 'Easily insert an icon into your thead or tfoot header. Supports String for core icons and Object for other FontAwesome Icons' },
  { property: 'formatter', type: 'String or Function', descr: 'A formatter callback function or name of a method in your component, can be used instead of (or in conjunction with) scoped field slots. The formatter will be called with the syntax formatter(value, key, item). Refer to Custom Data Rendering for more details.' },
  { property: 'sortByFormatted', type: 'Boolean', descr: 'Sort the column by the result of the field\'s formatter when set to true. Default is false. Boolean has no effect if the field does not have a formatter.' },
  { property: 'filterByFormatted', type: 'Boolean', descr: 'Filter the column by the result of the field\'s formatter when set to true. Default is false. Boolean has no effect if the field does not have a formatter.' },
  { property: 'tdClass', type: 'String or Array or Function', descr: 'Class name (or array of class names) to add to `<tbody>` data `<td>` cells in the column. If custom classes per cell are required, a callback function can be specified instead. The function will be called as tdClass(value, key, item) and it must return an Array or String.' },
  { property: 'thClass', type: 'String or Array', descr: 'Class name (or array of class names) to add to this field\'s `<thead>/<tfoot>` heading `<th>` cell.' },
  { property: 'tdAttr', type: 'Object or Function', descr: 'JavaScript object representing additional attributes to apply to the `<tbody>` field `<td>` cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as tdAttr(value, key, item) and it must return an Object.' },
  { property: 'sortFormatter', type: 'String or Function', descr: 'A formatter that is only used for sorting. This formatter functions the same as `formatter`' },
  { property: 'filter', type: 'Boolean', descr: 'Enable column filter on this column. Refer to Filtering section for more details' },
  { property: 'dateFilter', type: 'Boolean', descr: 'Enable date column filter on this column. Refer to Filtering section for more details' },
])
</script>


<template>
  <AisTable
      bordered striped sticky-headers
      :fields="fields"
      :items="items"
      table-class="mt-0"
      sticky-top="top-[57px]"
  ></AisTable>
</template>
