mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
start tabulator table component
This commit is contained in:
Jordan Blasenhauer
parent
f94aaba4f6
commit
20975be247
3 changed files with 175 additions and 23 deletions
|
|
@ -1,32 +1,176 @@
|
|||
<script setup>
|
||||
import { reactive, onBeforeMount, triggerRef } from "vue";
|
||||
<!-- <script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import InputList from "@components/Forms/Field/List.vue";
|
||||
import GridLayout from "@components/Widget/GridLayout.vue";
|
||||
import DashboardLayout from "@components/Dashboard/Layout.vue";
|
||||
import { resolveComponent } from "vue";
|
||||
import { TabulatorFull as Tabulator } from "tabulator-tables"; //import Tabulator library
|
||||
|
||||
const list = {
|
||||
id: "test-input",
|
||||
value: "yes no maybe I don't know can you repeat the question ",
|
||||
name: "test-list",
|
||||
label: "Test list",
|
||||
inpType: "list",
|
||||
onlyDown: true,
|
||||
popovers: [
|
||||
function addModules() {
|
||||
Tabulator.extendModule("format", "formatters", {
|
||||
icons: function (cell, formatterParams) {
|
||||
console.log(cell);
|
||||
console.log(formatterParams);
|
||||
const values = cell.getValue();
|
||||
console.log(values);
|
||||
return values;
|
||||
// return resolveComponent(Icons, {
|
||||
// iconName: values?.iconName,
|
||||
// iconClass: values?.iconClass,
|
||||
// color: values?.color,
|
||||
// });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const tableEl = ref(null); //reference to your table element
|
||||
|
||||
const table = reactive({
|
||||
instance: null,
|
||||
columns: [
|
||||
{ title: "Name", field: "name", width: 150 },
|
||||
{ title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
|
||||
{ title: "Favourite Color", field: "col" },
|
||||
{
|
||||
text: "This is a popover text",
|
||||
iconName: "info",
|
||||
title: "Date Of Birth",
|
||||
field: "dob",
|
||||
sorter: "date",
|
||||
hozAlign: "center",
|
||||
},
|
||||
],
|
||||
columns: { pc: 12, tablet: 12, mobile: 12 },
|
||||
};
|
||||
data: [{ id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" }],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
addModules();
|
||||
//instantiate Tabulator when element is mounted
|
||||
table.instance = new Tabulator(tableEl.value, {
|
||||
data: table.data, //link data to table
|
||||
reactiveData: true, //enable data reactivity
|
||||
columns: table.columns, //define table columns
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardLayout>
|
||||
<GridLayout :columns="{ pc: 12, tablet: 12, mobile: 12 }">
|
||||
<!-- widget grid -->
|
||||
<InputList v-bind="list" />
|
||||
</GridLayout>
|
||||
</DashboardLayout>
|
||||
<link
|
||||
href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<div ref="tableEl"></div>
|
||||
</template> -->
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, Teleport, computed } from "vue";
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import { TabulatorFull as Tabulator } from "tabulator-tables"; //import Tabulator library
|
||||
|
||||
const props = defineProps({
|
||||
isPagination: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
paginationSize: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1,
|
||||
},
|
||||
paginationInitialPage: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1,
|
||||
},
|
||||
paginationSizeSelector: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: [10, 25, 50, 100, true],
|
||||
},
|
||||
});
|
||||
|
||||
const tableEl = ref(null); //reference to your table element
|
||||
|
||||
const table = reactive({
|
||||
instance: null,
|
||||
columns: [
|
||||
{ title: "Name", field: "name", width: 150 },
|
||||
{ title: "Icon", field: "icon", formatter: "icons" },
|
||||
],
|
||||
data: [
|
||||
{ id: 1, name: "test", icon: { iconName: "box", color: "amber" } },
|
||||
{
|
||||
id: 2,
|
||||
name: "test",
|
||||
icon: { iconName: "document", color: "blue" },
|
||||
},
|
||||
{ id: 3, name: "test", icon: { iconName: "box", color: "amber" } },
|
||||
{ id: 4, name: "test", icon: { iconName: "document", color: "blue" } },
|
||||
{ id: 5, name: "test", icon: { iconName: "box", color: "amber" } },
|
||||
{ id: 6, name: "test", icon: { iconName: "document", color: "blue" } },
|
||||
{ id: 7, name: "test", icon: { iconName: "box", color: "amber" } },
|
||||
],
|
||||
customComponents: [],
|
||||
options: computed(() => {
|
||||
const opts = {
|
||||
data: table.data, //link data to table
|
||||
reactiveData: true, //enable data reactivity
|
||||
columns: table.columns, //define table columns
|
||||
};
|
||||
|
||||
if (props.isPagination) {
|
||||
opts.pagination = true;
|
||||
opts.paginationSize = props.paginationSize;
|
||||
opts.paginationInitialPage = props.paginationInitialPage;
|
||||
opts.paginationButtonCount = 2;
|
||||
opts.paginationSizeSelector = props.paginationSizeSelector;
|
||||
opts.paginationCounter = "rows";
|
||||
}
|
||||
return opts;
|
||||
}),
|
||||
});
|
||||
|
||||
function setCustomComponent(type, values, elDOM) {
|
||||
table.customComponents.push({
|
||||
type: type,
|
||||
values: values,
|
||||
elDOM: elDOM,
|
||||
});
|
||||
}
|
||||
|
||||
function addModules() {
|
||||
Tabulator.extendModule("format", "formatters", {
|
||||
icons: function (cell, formatterParams) {
|
||||
setCustomComponent("Icons", cell.getValue(), cell.getElement());
|
||||
return "";
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
addModules();
|
||||
//instantiate Tabulator when element is mounted
|
||||
table.instance = new Tabulator(tableEl.value, table.options);
|
||||
table.instance.on("tableBuilt", () => {
|
||||
console.log("tableBuilt");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<link
|
||||
href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<div ref="tableEl"></div>
|
||||
<template
|
||||
:key="table.customComponents"
|
||||
v-for="component in table.customComponents"
|
||||
>
|
||||
<Teleport :to="component.elDOM">
|
||||
<Icons
|
||||
v-if="component.type === 'Icons'"
|
||||
v-bind="{ ...component.values }"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
7
src/ui/client/package-lock.json
generated
7
src/ui/client/package-lock.json
generated
|
|
@ -14,6 +14,7 @@
|
|||
"flag-icons": "^6.15.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"pinia": "^2.1.6",
|
||||
"tabulator-tables": "^6.2.5",
|
||||
"vite-plugin-singlefile": "^2.0.2",
|
||||
"vue": "^3.3.8"
|
||||
},
|
||||
|
|
@ -2316,6 +2317,12 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tabulator-tables": {
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-6.2.5.tgz",
|
||||
"integrity": "sha512-f/TI78hV+GNoBefdqQ4q5RXbP+vJkvwSwt7sqeCTriAchNXax3ekcT1GG3i2J+8mhz6dHg0PFKyCYfmMW45HEg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"flag-icons": "^6.15.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"pinia": "^2.1.6",
|
||||
"tabulator-tables": "^6.2.5",
|
||||
"vite-plugin-singlefile": "^2.0.2",
|
||||
"vue": "^3.3.8"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue