Add pagination example but its still broken

dolanske · Jan 26, 2025 · 61f49fc · 61f49fc
1 parent aceb698
commit 61f49fc
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 7 deletions.
diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss
@@ -47,6 +47,10 @@
     tr {
       border: none;
 
+      &:first-child td {
+        border-top: 0 !important;
+      }
+
       &:has(.vui-table-interactive-cell.selected) {
         td {
           background-color: var(--color-bg-raised);

diff --git a/src/examples/ExampleTables.vue b/src/examples/ExampleTables.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, ref } from 'vue'
+import Accordion from '../components/Accordion/Accordion.vue'
+import { paginate } from '../components/Pagination/pagination'
 import Pagination from '../components/Pagination/Pagination.vue'
 import * as Table from '../components/Table/index'
 import { defineTable } from '../components/Table/table'
@@ -37,6 +39,7 @@ const {
   rows,
   headers,
   pagination,
+  allRows,
   setPage,
   selectedRows,
 } = defineTable(data, {
@@ -47,8 +50,12 @@ const {
   select: true,
 })
 
-// TODO: add an example of other table props with simple data
-// TODO: add an example of pagination not used with a table but standalone
+// Example
+//
+const testData = ['Jan', 'Andrew', 'Kasper', 'Anton', 'Felix', 'Daniel', 'Gabriel', 'Ayalga', '']
+const page = ref(1)
+const paginationExample = computed(() => paginate(testData.length, page.value, 2))
+const exampleToRender = computed(() => testData.slice(paginationExample.value.startIndex, paginationExample.value.endIndex))
 </script>
 
 <template>
@@ -103,6 +110,10 @@ const {
       Data table
     </h5>
 
+    <p class="mb-s">
+      This example demonstrates the full capability of the table component. Including column sorting, pagination and row selection.
+    </p>
+
     <Table.Root separate-cells class="mb-l">
       <template #header>
         <Table.SelectAll />
@@ -121,9 +132,61 @@ const {
       </template>
     </Table.Root>
 
-    <span class="mb-s block">Selected rows</span>
-    <pre>
-      {{ selectedRows }}
-    </pre>
+    <Accordion :label="`Selected rows (${selectedRows.size})`" class="mb-xl">
+      <pre>
+        {{ selectedRows }}
+      </pre>
+    </Accordion>
+
+    <h5 class="mb-s">
+      Variations
+    </h5>
+
+    <div class="typeset mb-xl">
+      <ul>
+        <li><p><code>separate-rows</code> Adds a border between rows (default: <code>true</code>)</p></li>
+        <li><p><code>separate-cells</code> Adds a border between cells (default: <code>false</code>)</p></li>
+        <li><p><code>outer-border</code> Adds a border around the entire table component (default: <code>true</code>)</p></li>
+        <li><p><code>nowrap</code> Adds ellipsis to text which overflows to keep row size consistent (default: <code>false</code>)</p></li>
+        <li><p><code>fixed</code> Keeps all the columns the same size (default: <code>false</code>)</p></li>
+      </ul>
+    </div>
+
+    <div class="container container-s mb-xxl ml-0">
+      <Table.Root :outer-border="false" :separate-cells="true" nowrap fixed>
+        <template #body>
+          <tr v-for="row in allRows" :key="row.Year">
+            <Table.Cell>{{ `${row.Nation} ${row.Nation}` }}</Table.Cell>
+            <Table.Cell>{{ row.Population }}</Table.Cell>
+            <Table.Cell>{{ row.Year }}</Table.Cell>
+          </tr>
+        </template>
+      </Table.Root>
+    </div>
+
+    <h5 class="mb-s">
+      Pagination
+    </h5>
+
+    <p class="mb-m">
+      Pagination does not need to be used with table only. The calculation of pages is done via an external function and the pagination component accepts all the necesary props to implement it for any kind of dataset and UI
+    </p>
+
+    <p class="mb-m">
+      Here we have a list of names and we're gonna paginate through them. {{ testData.join(', ') }}
+    </p>
+    <Pagination :pagination="paginationExample" class="mb-l" @change="(num) => page = num" />
+    <div class="typeset mb-m">
+      <ul>
+        <li
+          v-for="name in exampleToRender"
+          :key="name"
+        >
+          {{ name }}
+        </li>
+      </ul>
+    </div>
+
+    <pre>{{ paginationExample }}</pre>
   </div>
 </template>