docs: vue pagination example (#4756)

TanStack · Mar 26, 2023 · b2b4e14 · b2b4e14
1 parent 0de0a15
commit b2b4e14
Show file tree

Hide file tree

Showing 14 changed files with 830 additions and 0 deletions.
diff --git a/examples/vue/pagination/.gitignore b/examples/vue/pagination/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/pagination/README.md b/examples/vue/pagination/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/vue/pagination/index.html b/examples/vue/pagination/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/pagination/package.json b/examples/vue/pagination/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "tanstack-table-example-vue-basic",
+    "private": true,
+    "version": "0.0.0",
+    "scripts": {
+      "dev": "vite",
+      "build": "vue-tsc --noEmit && vite build",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+      "vue": "^3.2.25",
+      "@faker-js/faker": "^7.6.0",
+      "@tanstack/vue-table": "8.7.9"
+    },
+    "devDependencies": {
+      "@vitejs/plugin-vue": "^2.3.3",
+      "typescript": "^4.5.4",
+      "vite": "^2.9.9",
+      "vue-tsc": "^0.34.7"
+    }
+  }
+
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useVueTable,
+  createColumnHelper,
+} from "@tanstack/vue-table";
+import { ref } from "vue";
+import { makeData, Person } from "./makeData";
+
+const INITIAL_PAGE_INDEX = 0;
+
+const defaultData = makeData(100);
+const columnHelper = createColumnHelper<Person>();
+const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1);
+const pageSizes = [10, 20, 30, 40, 50];
+const data = ref(defaultData);
+
+const columns = [
+  columnHelper.group({
+    header: "Name",
+    footer: (props) => props.column.id,
+    columns: [
+      columnHelper.accessor("firstName", {
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
+      }),
+      columnHelper.accessor((row) => row.lastName, {
+        id: "lastName",
+        cell: (info) => info.getValue(),
+        header: () => "Last Name",
+        footer: (props) => props.column.id,
+      }),
+    ],
+  }),
+  columnHelper.group({
+    header: "Info",
+    footer: (props) => props.column.id,
+    columns: [
+      columnHelper.accessor("age", {
+        header: () => "Age",
+        footer: (props) => props.column.id,
+      }),
+      columnHelper.group({
+        header: "More Info",
+        columns: [
+          columnHelper.accessor("visits", {
+            header: () => "Visits",
+            footer: (props) => props.column.id,
+          }),
+          columnHelper.accessor("status", {
+            header: "Status",
+            footer: (props) => props.column.id,
+          }),
+          columnHelper.accessor("progress", {
+            header: "Profile Progress",
+            footer: (props) => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+];
+
+const table = useVueTable({
+  get data() {
+    return data.value;
+  },
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+});
+
+function rerender() {
+  data.value = defaultData;
+}
+
+function handleGoToPage(e) {
+  const page = e.target.value ? Number(e.target.value) - 1 : 0;
+  goToPageNumber.value = page + 1;
+  table.setPageIndex(page);
+}
+
+function handlePageSizeChange(e) {
+  table.setPageSize(Number(e.target.value));
+}
+</script>
+
+<template>
+  <div class="p-2">
+    <table>
+      <thead>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in table.getRowModel().rows" :key="row.id">
+          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+            <FlexRender
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr
+          v-for="footerGroup in table.getFooterGroups()"
+          :key="footerGroup.id"
+        >
+          <th
+            v-for="header in footerGroup.headers"
+            :key="header.id"
+            :colSpan="header.colSpan"
+          >
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.footer"
+              :props="header.getContext()"
+            />
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+    <div>
+      <div class="flex items-center gap-2">
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(0)"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          «
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.previousPage()"
+          :disabled="!table.getCanPreviousPage()"
+        >
+          ‹
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.nextPage()"
+          :disabled="!table.getCanNextPage()"
+        >
+          ›
+        </button>
+        <button
+          class="border rounded p-1"
+          @click="() => table.setPageIndex(table.getPageCount() - 1)"
+          :disabled="!table.getCanNextPage()"
+        >
+          »
+        </button>
+        <span class="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {{ table.getState().pagination.pageIndex + 1 }} of
+            {{ table.getPageCount() }}
+          </strong>
+        </span>
+        <span class="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            :value="goToPageNumber"
+            @change="handleGoToPage"
+            class="border p-1 rounded w-16"
+          />
+        </span>
+        <select
+          :value="table.getState().pagination.pageSize"
+          @change="handlePageSizeChange"
+        >
+          <option
+            :key="pageSize"
+            :value="pageSize"
+            v-for="pageSize in pageSizes"
+          >
+            Show {{ pageSize }}
+          </option>
+        </select>
+      </div>
+      <div>{{ table.getRowModel().rows.length }} Rows</div>
+      <pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
+    </div>
+    <div class="h-2" />
+    <button @click="rerender" class="border p-2">Rerender</button>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
+</style>
diff --git a/examples/vue/pagination/src/env.d.t.s b/examples/vue/pagination/src/env.d.t.s
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/pagination/src/main.ts b/examples/vue/pagination/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/examples/vue/pagination/src/makeData.ts b/examples/vue/pagination/src/makeData.ts
@@ -0,0 +1,50 @@
+import { faker } from "@faker-js/faker";
+
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  progress: number;
+  status: "relationship" | "complicated" | "single";
+  subRows?: Person[];
+};
+
+const range = (len: number) => {
+  const arr = [];
+  for (let i = 0; i < len; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.name.firstName(),
+    lastName: faker.name.lastName(),
+    age: faker.datatype.number(40),
+    visits: faker.datatype.number(1000),
+    progress: faker.datatype.number(100),
+    status: faker.helpers.shuffle<Person["status"]>([
+      "relationship",
+      "complicated",
+      "single"
+    ])[0]!
+  };
+};
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!;
+    return range(len).map(
+      (d): Person => {
+        return {
+          ...newPerson(),
+          subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
+        };
+      }
+    );
+  };
+
+  return makeDataLevel();
+}