add examples

Author: jimmynguyen1308

examples/README.md

@@ -0,0 +1,21 @@
+# Qwik-table-loader Examples
+
+![image](https://img.shields.io/badge/Qwik-E10098?style=for-the-badge&logo=lightning&logoColor=white) ![image](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) ![image](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+By [`@jimmynguyen1308`](https://github.com/jimmynguyen1308)
+
+## Example 1
+
+Click [here](example1.tsx) to see code
+
+### Screenshot
+
+![screenshot-1](screenshot-example-1.png)
+
+## Example 2
+
+Click [here](example2.tsx) to see code
+
+### Screenshot
+
+![screenshot-1](screenshot-example-2.png)

examples/example1.tsx

@@ -3,6 +3,7 @@ import TableLoader, { filterType } from "qwik-table-loader"
 import { CellData, FilterValue } from "qwik-table-loader/lib-types/types"
 
 export default component$(() => {
+  // You can have a set of options for your filter
   const statusOptions: FilterValue[] = [
     {
       key: 0,
@@ -22,6 +23,7 @@ export default component$(() => {
     },
   ]
 
+  // Given this is your raw data
   const data = [
     {
       id: 1,
@@ -60,6 +62,7 @@ export default component$(() => {
     },
   ]
 
+  // Special data types (eg. Date) should be optimized before loading to the table
   const tData = data.map((record: any) => {
     return {
       ...record,
@@ -73,6 +76,7 @@ export default component$(() => {
     }
   })
 
+  // Custom format table cell "dob"
   const formatDob = $((record: CellData, heading: string) => {
     const list = record[heading]?.toString()?.split("-")
     if (list) {
@@ -81,6 +85,7 @@ export default component$(() => {
     return ""
   })
 
+  // Custom format table cell "status"
   const formatStatus = $((record: CellData, heading: string) => {
     switch (record[heading]) {
       case 0:
@@ -118,26 +123,29 @@ export default component$(() => {
 
   return (
     <>
-      <Link href="/">
-        <span class="text-blue-500 underline">&lt;&lt; Go Back</span>
-      </Link>
       <TableLoader
+        // Your optimized data.
         tData={tData}
+        // Your custom elements based on the column types
         element={{
           dob: formatDob,
           status: formatStatus,
         }}
         tableOptions={{
+          // Customize your heading text here...
           customHeadings: {
             dob: "Date of Birth",
           },
+          // For pure CSS, you can attach class names and add .css file styling those classes
+          // For TailwindCSS, this is where you customize your table styling
           classNames: {
             table: "my-6 mx-3 border-2 border-[#333]",
             thead: "bg-gray-600 border-2 border-[#333]",
             th: "text-white border border-[#333] p-2 px-4",
             thContent: "h-full flex flex-col gap-1 min-w-[30px]",
             thText:
               "min-h-[24px] flex flex-row items-center justify-between gap-2",
+            // Arrows' size, default color and highlight color should be store like this format in sortContainer
             sortContainer:
               "flex flex-col -mr-1 size-[20] default-[#ccc] highlight-[#fff]",
             sortArrowUp: "-mb-[7px]",
@@ -148,22 +156,27 @@ export default component$(() => {
             tbody: "bg-gray-100",
             tr: "border border-[#ccc]",
             td: "border border-[#ccc] p-1 px-3",
+            // Custom class names based on column name
             tcol: {
               id: "max-w-[80px] text-center",
               fullName: "font-bold",
               dob: "max-w-[160px] text-right",
             },
           },
+          // Sort options: choose which columns to have the sort feature included
           sortOptions: {
             params: ["username", "fullName", "dob", "status"],
           },
           filterOptions: {
+            // You can use the filterType enum, or simply type "search" or "options"
             params: {
               username: filterType.SEARCH,
               fullName: filterType.SEARCH,
               dob: filterType.SEARCH,
               status: filterType.OPTIONS,
             },
+            // If a column has "options" filter, it needs to have an option list
+            // Otherwise, the options will be blank
             options: {
               status: statusOptions,
             },

examples/example2.tsx

@@ -3,6 +3,8 @@ import TableLoader, { value2Options, filterType } from "qwik-table-loader"
 import { CellData } from "qwik-table-loader/lib-types/types"
 
 export default component$(() => {
+  // Given this is your raw data
+  // If it is optimized (data types are string or number), you can parse to the table directly
   const tData: CellData[] = [
     {
       id: 1,
@@ -27,9 +29,11 @@ export default component$(() => {
     },
   ]
 
+  // You can generate option lists for your filters using the fuction value2Options() from the lib
   const brandOptions = value2Options(tData, "brand_name")
   const yearOptions = value2Options(tData, "year")
 
+  // Custom format table cell "year"
   const formatYear = $((record: CellData, heading: string) => {
     const currentYear = new Date().getFullYear()
     if (record[heading] === currentYear) {
@@ -49,18 +53,23 @@ export default component$(() => {
   return (
     <>
       <TableLoader
+        // Your optimized data.
         tData={tData}
+        // Your custom elements based on the column types
         element={{
           year: formatYear,
         }}
         tableOptions={{
+          // For pure CSS, you can attach class names and add .css file styling those classes
+          // For TailwindCSS, this is where you customize your table styling
           classNames: {
             table: "my-6 mx-3",
             thead: "",
             th: "p-2 px-4 border border-transparent border-b-black",
             thContent: "h-full flex flex-col gap-1 min-w-[30px]",
             thText:
               "min-h-[24px] flex flex-row items-center justify-between gap-2",
+            // Arrows' size, default color and highlight color should be store like this format in sortContainer
             sortContainer:
               "flex flex-col -mr-1 size-[20] default-[#aaa] highlight-[#000]",
             sortArrowUp: "-mb-[7px]",
@@ -70,6 +79,7 @@ export default component$(() => {
               "w-full outline-none border border-[#aaa] text-black font-light p-1 px-2 rounded-md",
             tbody: "border-[3px] border-transparent border-t-black",
             td: "p-3",
+            // Custom class names based on column name
             tcol: {
               id: "max-w-[80px] border border-transparent border-r-black",
               brand_name:
@@ -78,15 +88,19 @@ export default component$(() => {
               description: "w-[240px] border border-transparent border-r-black",
             },
           },
+          // Sort options: choose which columns to have the sort feature included
           sortOptions: {
             params: ["id", "brand_name", "device", "year"],
           },
           filterOptions: {
+            // You can use the filterType enum, or simply type "search" or "options"
             params: {
               brand_name: filterType.OPTIONS,
               device: filterType.SEARCH,
               year: filterType.OPTIONS,
             },
+            // If a column has "options" filter, it needs to have an option list
+            // Otherwise, the options will be blank
             options: {
               brand_name: brandOptions,
               year: yearOptions,