Daisy-Data-Components

Explanation

The "daisy-data-components" NPM package is a powerful and versatile TypeScript library that simplifies the process of displaying complex datasets in a simple and intuitive manner. Developed using the popular front-end development frameworks daisyUI and TailwindCSS, this package offers a range of customizable data components that are designed to provide an optimal user experience while handling large volumes of data.

One of the standout features of this library is its ease-of-use. With a user-friendly interface and clear documentation, developers can quickly and efficiently integrate "daisy-data-components" into their web applications. Whether you are new to front-end development or an experienced developer, this library makes it easy to create beautiful and functional data visualizations.

In addition to its ease-of-use, "daisy-data-components" is also highly customizable. Unlike other data visualization libraries, all of the components included in this package can be customized to fit your specific needs. This means that you can develop your own components to create a truly unique data visualization experience for your users.

It's worth noting that "daisy-data-components" has already been adopted by some of my projects at work, a testament to its quality and reliability. With built-in pagination, sorting, and search functionality, this package is the perfect solution for developers looking to enhance their data visualization capabilities.

In summary, the "daisy-data-components" NPM package is a powerful and flexible data visualization library that simplifies the display of complex datasets. With its ease-of-use, customization options, and proven reliability, this package is an essential tool for any developer working with data-centric web applications.

Installation

1. Install Vue3 (You also need vue-tsc, this project is built up with typescript)
2. Install TailwindCSS
3. Install DaisyUI
4. Install this package

npm install daisy-data-components

Example

1<template>
2   <div class="flex justify-between items-center mb-3">
3      <div class="flex justify-start items-center gap-3">
4         <h1 class="text-lg text-white font-bold">Alle Config Items</h1>
5         <div class="badge badge-primary">
6            <span>{{ options.items.length }}</span>
7         </div>
8      </div>
9      <input type="text" placeholder="Search..." class="input input-bordered" v-model="options.searchQuery"/>
10   </div>
11   <DataTable :options="options">
12      <!-- The title of the column <thead> -> <tr> -> <th> -->
13      <template #column="{ column }">
14         <div v-if="column.sortable" class="flex gap-3 items-center">
15            <span class="underline">{{ column.title }}</span>
16            <font-awesome-icon icon="fa-solid fa-sort" />
17         </div>
18         <span v-else>{{ column.title }}</span>
19      </template>
20
21      <!-- Separate <tbody> when the data is loading (uses full width and height) -->
22      <template #loading>
23         <div role="status" class="flex flex-col justify-center items-center gap-3">
24            <font-awesome-icon icon="fa-solid fa-spinner" class="animate-spin text-white fa-3x" />
25            <span class="text-white">Loading...</span>
26         </div>
27      </template>
28
29      <!-- Separate <tbody> when there is no data available (uses full width and height) -->
30      <template #no-data>
31         <div role="status" class="flex flex-col justify-center items-center gap-3">
32            <font-awesome-icon icon="fa-solid fa-bomb" class="text-red-400 fa-3x" />
33            <span class="text-white">No data found</span>
34         </div>
35      </template>
36
37      <!-- The Firstname Column <tbody> -> <tr> -> <td> -->
38      <template #firstName="{ item }">
39         <div class="badge badge-primary">
40            <span>{{ item.firstName }}</span>
41         </div>
42      </template>
43
44      <!-- The Lastname Column <tbody> -> <tr> -> <td> -->
45      <template #lastName="{ item }">
46         <span>{{ item.lastName }}</span>
47      </template>
48
49      <!-- The DateOfBirth Column <tbody> -> <tr> -> <td> -->
50      <template #dateOfBirth="{ item }">
51         <span>{{ item.dateOfBirth.toLocaleDateString() }}</span>
52      </template>
53
54      <!-- The <tfoot> -->
55      <template #foot="{ pages, page, pageAmount, pageId }">
56         <div class="flex justify-between items-end gap-3 w-full">
57            <div class="btn-group">
58               <button class="btn"
59                       @click="options.pageCurrentId = options.pageCurrentId - 1"
60                       :class="{ 'btn-disabled': options.pageCurrentId === 0 }">«</button>
61               <button class="btn no-animation">Page {{ options.pageCurrentId + 1 }}</button>
62               <button class="btn"
63                       @click="options.pageCurrentId = options.pageCurrentId + 1"
64                       :class="{ 'btn-disabled': options.pageCurrentId === pages.length -1 }">»</button>
65            </div>
66            <div class="form-control w-full max-w-xs">
67               <label class="label">
68                  <span class="label-text">Rows per page</span>
69               </label>
70               <select class="select select-bordered" v-model="options.pageSize">
71                  <option v-for="(pageSizeOption, index) in pageSizeOptions"
72                          :key="index"
73                          :value="pageSizeOption.value">{{ pageSizeOption.title }}</option>
74               </select>
75            </div>
76         </div>
77      </template>
78
79   </DataTable>
80</template>
81
82<script setup lang="ts">
83import {onMounted, ref} from 'vue'
84import DataTable from "daisy-data-components/src/table/DataTable.vue";
85import {DataTableColumn, DataTableOptions} from "daisy-data-components/src/table/data-table";
86
87export interface Address {
88   street: string;
89   houseNumber: string;
90   zipCode: string;
91   town: string;
92   country: string;
93}
94
95export interface Person {
96   id: number;
97   firstName: string;
98   lastName: string;
99   dateOfBirth: Date;
100   address: Address;
101}
102
103const pageSizeOptions = [
104   {
105      title: '5',
106      value: 5
107   },
108   {
109      title: '10',
110      value: 10
111   },
112   {
113      title: '15',
114      value: 15
115   },
116   {
117      title: 'Alle',
118      value: -1
119   }
120]
121
122const findPersons = async (): Promise<Person[]> => {
123   return [
124      {
125         id: 1,
126         firstName: "Max",
127         lastName: "Mustermann",
128         dateOfBirth: new Date("1990-05-08"),
129         address: {
130            street: "Musterstraße",
131            houseNumber: "12",
132            zipCode: "54321",
133            town: "Musterstadt",
134            country: "Deutschland"
135         }
136      },
137      {
138         id: 2,
139         firstName: "Maria",
140         lastName: "Müller",
141         dateOfBirth: new Date("1985-12-20"),
142         address: {
143            street: "Am Waldrand",
144            houseNumber: "5",
145            zipCode: "98765",
146            town: "Dorfheim",
147            country: "Österreich"
148         }
149      },
150      {
151         id: 3,
152         firstName: "John",
153         lastName: "Doe",
154         dateOfBirth: new Date("1975-08-16"),
155         address: {
156            street: "Main Street",
157            houseNumber: "123",
158            zipCode: "55555",
159            town: "New York",
160            country: "USA"
161         }
162      },
163      {
164         id: 4,
165         firstName: "Jane",
166         lastName: "Doe",
167         dateOfBirth: new Date("1980-02-29"),
168         address: {
169            street: "Highway 1",
170            houseNumber: "321",
171            zipCode: "99999",
172            town: "Los Angeles",
173            country: "USA"
174         }
175      },
176      {
177         id: 5,
178         firstName: "Hans",
179         lastName: "Schmidt",
180         dateOfBirth: new Date("1995-07-03"),
181         address: {
182            street: "Musterweg",
183            houseNumber: "15",
184            zipCode: "12345",
185            town: "Musterstadt",
186            country: "Deutschland"
187         }
188      },
189      {
190         id: 6,
191         firstName: "Emily",
192         lastName: "Jones",
193         dateOfBirth: new Date("1999-11-11"),
194         address: {
195            street: "Oak Street",
196            houseNumber: "10",
197            zipCode: "12345",
198            town: "San Francisco",
199            country: "USA"
200         }
201      },
202      {
203         id: 7,
204         firstName: "Juan",
205         lastName: "Lopez",
206         dateOfBirth: new Date("1988-06-25"),
207         address: {
208            street: "Calle Mayor",
209            houseNumber: "6",
210            zipCode: "28001",
211            town: "Madrid",
212            country: "Spanien"
213         }
214      },
215      {
216         id: 8,
217         firstName: "Elena",
218         lastName: "Garcia",
219         dateOfBirth: new Date("1977-03-18"),
220         address: {
221            street: "Carrer Gran",
222            houseNumber: "8",
223            zipCode: "08001",
224            town: "Barcelona",
225            country: "Spanien"
226         }
227      },
228      {
229         id: 9,
230         firstName: "Sophie",
231         lastName: "Müller",
232         dateOfBirth: new Date("1988-09-12"),
233         address: {
234            street: "Hauptstraße",
235            houseNumber: "17",
236            zipCode: "12345",
237            town: "Kleinstadt",
238            country: "Deutschland"
239         }
240      },
241      {
242         id: 10,
243         firstName: "David",
244         lastName: "Kim",
245         dateOfBirth: new Date("1995-02-22"),
246         address: {
247            street: "5th Avenue",
248            houseNumber: "123",
249            zipCode: "54321",
250            town: "New York",
251            country: "USA"
252         }
253      },
254      {
255         id: 11,
256         firstName: "Anna",
257         lastName: "Gonzalez",
258         dateOfBirth: new Date("1982-12-05"),
259         address: {
260            street: "Calle de la Rosa",
261            houseNumber: "23",
262            zipCode: "28003",
263            town: "Madrid",
264            country: "Spanien"
265         }
266      },
267      {
268         id: 12,
269         firstName: "Tom",
270         lastName: "Hansen",
271         dateOfBirth: new Date("1990-11-14"),
272         address: {
273            street: "Møllegade",
274            houseNumber: "7",
275            zipCode: "5000",
276            town: "Odense",
277            country: "Dänemark"
278         }
279      },
280      {
281         id: 13,
282         firstName: "Lena",
283         lastName: "Kühn",
284         dateOfBirth: new Date("1979-06-18"),
285         address: {
286            street: "Am Hang",
287            houseNumber: "4",
288            zipCode: "98765",
289            town: "Bergdorf",
290            country: "Österreich"
291         }
292      }
293   ]
294}
295
296const columns: DataTableColumn<Person>[] = [
297   {
298      slot: 'firstName',
299      title: 'First Name',
300      sortable: true,
301      searchable: true,
302      queryPredicate: (data: Person) => data.firstName
303   },
304   {
305      slot: 'lastName',
306      title: 'Last Name',
307      sortable: true,
308      searchable: true,
309      queryPredicate: (data: Person) => data.lastName
310   },
311   {
312      slot: 'dateOfBirth',
313      title: 'Birthday',
314      sortable: false,
315      searchable: false,
316      queryPredicate: (data: Person) => data.dateOfBirth.toLocaleDateString()
317   }
318]
319
320const options = ref<DataTableOptions<Person>>({
321   enableSearch: true,
322   searchQuery: '',
323   minSearchQueryLength: 0,
324   enablePagination: true,
325   pageSize: 5,
326   pageCurrentId: 0,
327   isDataLoading: true,
328   columns: columns,
329   items: []
330})
331
332const loadPersons = async () => {
333   options.value.isDataLoading = true
334   options.value.items = await findPersons()
335   options.value.isDataLoading = false
336}
337
338onMounted(loadPersons)
339</script>
340
341<style>
342.dd-table {
343   @apply table-zebra table-compact
344}
345
346.dd-table-body-column-0 {
347   @apply w-1/3
348}
349
350.dd-table-body-column-1 {
351   @apply w-1/3
352}
353
354.dd-table-body-column-2 {
355   @apply w-1/3
356}
357</style>