Skip to content

Commit 5df2892

Browse files
jimmynguyen1308jimmynguyen1308
committed
add changes for v0.1.0
1 parent 9f0c8b8 commit 5df2892

23 files changed

+553
-152
lines changed

‎bun.lockb‎

-13.9 KB
Binary file not shown.

‎eslint.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import globals from "globals";
2+
import pluginJs from "@eslint/js";
3+
import tseslint from "typescript-eslint";
4+
5+
6+
export default [
7+
{languageOptions: { globals: globals.browser }},
8+
pluginJs.configs.recommended,
9+
...tseslint.configs.recommended,
10+
];

‎examples/example1.tsx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { component$, $ } from "@builder.io/qwik"
2+
import TableLoader, { filterType } from "qwik-table-loader"
3+
import { CellData, FilterValue } from "qwik-table-loader/lib-types/types"
4+
5+
export default component$(() => {
6+
const statusOptions: FilterValue[] = [
7+
{
8+
key: 0,
9+
value: "Active",
10+
},
11+
{
12+
key: 1,
13+
value: "Disabled",
14+
},
15+
{
16+
key: 2,
17+
value: "Banned",
18+
},
19+
{
20+
key: 3,
21+
value: "Admin",
22+
},
23+
]
24+
25+
const data = [
26+
{
27+
id: 1,
28+
username: "jimmynguyen1308",
29+
fullName: "Jimmy Nguyen",
30+
dob: new Date(1998, 7, 13),
31+
status: 0,
32+
},
33+
{
34+
id: 2,
35+
username: "j0hndoe123",
36+
fullName: "John Doe",
37+
dob: new Date(2001, 0, 1),
38+
status: 1,
39+
},
40+
{
41+
id: 3,
42+
username: "a_dalton_66",
43+
fullName: "Alice Dalton",
44+
dob: new Date(2002, 5, 6),
45+
status: 0,
46+
},
47+
{
48+
id: 4,
49+
username: "z03bee_123",
50+
fullName: "Zoe Bee",
51+
dob: new Date(1982, 4, 18),
52+
status: 0,
53+
},
54+
{
55+
id: 5,
56+
username: "takashi69",
57+
fullName: "Tak Ashi",
58+
dob: new Date(1969, 8, 6),
59+
status: 2,
60+
},
61+
]
62+
63+
const tData = data.map((record: any) => {
64+
return {
65+
...record,
66+
dob: (
67+
record.dob.getFullYear() +
68+
"-" +
69+
(record.dob.getMonth() + 1) +
70+
"-" +
71+
record.dob.getDate()
72+
).toString(),
73+
}
74+
})
75+
76+
const formatDob = $((record: CellData, heading: string) => {
77+
const list = record[heading]?.toString()?.split("-")
78+
if (list) {
79+
return list[2] + "/" + list[1] + "/" + list[0]
80+
}
81+
return ""
82+
})
83+
84+
const formatStatus = $((record: CellData, heading: string) => {
85+
switch (record[heading]) {
86+
case 0:
87+
return (
88+
<span class="rounded-md bg-green-400 p-1 px-2 text-sm text-white">
89+
Active
90+
</span>
91+
)
92+
case 1:
93+
return (
94+
<span class="rounded-md bg-gray-400 p-1 px-2 text-sm text-white">
95+
Disabled
96+
</span>
97+
)
98+
case 2:
99+
return (
100+
<span class="rounded-md bg-rose-400 p-1 px-2 text-sm text-white">
101+
Banned
102+
</span>
103+
)
104+
case 3:
105+
return (
106+
<span class="rounded-md bg-orange-500 p-1 px-2 text-sm text-white">
107+
Admin
108+
</span>
109+
)
110+
default:
111+
return (
112+
<span class="rounded-md bg-gray-400 p-1 px-2 text-sm text-white">
113+
N/A
114+
</span>
115+
)
116+
}
117+
})
118+
119+
return (
120+
<>
121+
<Link href="/">
122+
<span class="text-blue-500 underline">&lt;&lt; Go Back</span>
123+
</Link>
124+
<TableLoader
125+
tData={tData}
126+
element={{
127+
dob: formatDob,
128+
status: formatStatus,
129+
}}
130+
tableOptions={{
131+
customHeadings: {
132+
dob: "Date of Birth",
133+
},
134+
classNames: {
135+
table: "my-6 mx-3 border-2 border-[#333]",
136+
thead: "bg-gray-600 border-2 border-[#333]",
137+
th: "text-white border border-[#333] p-2 px-4",
138+
thContent: "h-full flex flex-col gap-1 min-w-[30px]",
139+
thText:
140+
"min-h-[24px] flex flex-row items-center justify-between gap-2",
141+
sortContainer:
142+
"flex flex-col -mr-1 size-[20] default-[#ccc] highlight-[#fff]",
143+
sortArrowUp: "-mb-[7px]",
144+
sortArrowDown: "-mt-[7px]",
145+
filterContainer: "min-h-[24px]",
146+
filterInput:
147+
"w-full outline-none text-black font-light p-1 px-2 rounded-md",
148+
tbody: "bg-gray-100",
149+
tr: "border border-[#ccc]",
150+
td: "border border-[#ccc] p-1 px-3",
151+
tcol: {
152+
id: "max-w-[80px] text-center",
153+
fullName: "font-bold",
154+
dob: "max-w-[160px] text-right",
155+
},
156+
},
157+
sortOptions: {
158+
params: ["username", "fullName", "dob", "status"],
159+
},
160+
filterOptions: {
161+
params: {
162+
username: filterType.SEARCH,
163+
fullName: filterType.SEARCH,
164+
dob: filterType.SEARCH,
165+
status: filterType.OPTIONS,
166+
},
167+
options: {
168+
status: statusOptions,
169+
},
170+
},
171+
}}
172+
/>
173+
</>
174+
)
175+
})

‎examples/example2.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { component$, $ } from "@builder.io/qwik"
2+
import TableLoader, { value2Options, filterType } from "qwik-table-loader"
3+
import { CellData } from "qwik-table-loader/lib-types/types"
4+
5+
export default component$(() => {
6+
const tData: CellData[] = [
7+
{
8+
id: 1,
9+
brand_name: "Apple",
10+
device: "iPhone 15 Pro Max",
11+
description: "This is the description for the iPhone 15 Pro Max",
12+
year: 2023,
13+
},
14+
{
15+
id: 2,
16+
brand_name: "Apple",
17+
device: "Apple Vision Pro",
18+
description: "This is the description for the Apple Vision Pro",
19+
year: 2024,
20+
},
21+
{
22+
id: 3,
23+
brand_name: "Samsung",
24+
device: "Samsung Galaxy Z Fold 5",
25+
description: "This is the description for the iPhone Vision Pro",
26+
year: 2023,
27+
},
28+
]
29+
30+
const brandOptions = value2Options(tData, "brand_name")
31+
const yearOptions = value2Options(tData, "year")
32+
33+
const formatYear = $((record: CellData, heading: string) => {
34+
const currentYear = new Date().getFullYear()
35+
if (record[heading] === currentYear) {
36+
return (
37+
<span class="rounded-md bg-green-400 p-1 px-2 text-sm text-white">
38+
{record[heading]}
39+
</span>
40+
)
41+
}
42+
return (
43+
<span class="rounded-md bg-gray-400 p-1 px-2 text-sm text-white">
44+
{record[heading]}
45+
</span>
46+
)
47+
})
48+
49+
return (
50+
<>
51+
<TableLoader
52+
tData={tData}
53+
element={{
54+
year: formatYear,
55+
}}
56+
tableOptions={{
57+
classNames: {
58+
table: "my-6 mx-3",
59+
thead: "",
60+
th: "p-2 px-4 border border-transparent border-b-black",
61+
thContent: "h-full flex flex-col gap-1 min-w-[30px]",
62+
thText:
63+
"min-h-[24px] flex flex-row items-center justify-between gap-2",
64+
sortContainer:
65+
"flex flex-col -mr-1 size-[20] default-[#aaa] highlight-[#000]",
66+
sortArrowUp: "-mb-[7px]",
67+
sortArrowDown: "-mt-[7px]",
68+
filterContainer: "min-h-[24px]",
69+
filterInput:
70+
"w-full outline-none border border-[#aaa] text-black font-light p-1 px-2 rounded-md",
71+
tbody: "border-[3px] border-transparent border-t-black",
72+
td: "p-3",
73+
tcol: {
74+
id: "max-w-[80px] border border-transparent border-r-black",
75+
brand_name:
76+
"max-w-[160px] border border-transparent border-r-black",
77+
device: "max-w-[240px] border border-transparent border-r-black",
78+
description: "w-[240px] border border-transparent border-r-black",
79+
},
80+
},
81+
sortOptions: {
82+
params: ["id", "brand_name", "device", "year"],
83+
},
84+
filterOptions: {
85+
params: {
86+
brand_name: filterType.OPTIONS,
87+
device: filterType.SEARCH,
88+
year: filterType.OPTIONS,
89+
},
90+
options: {
91+
brand_name: brandOptions,
92+
year: yearOptions,
93+
},
94+
},
95+
}}
96+
/>
97+
</>
98+
)
99+
})

‎examples/screenshot-example-1.png‎

116 KB
Loading

‎examples/screenshot-example-2.png‎

109 KB
Loading

‎package.json‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "qwik-table-loader",
3-
"version": "0.0.15-development",
3+
"version": "0.1.0",
44
"description": "A table library for Qwik",
55
"main": "./lib/index.qwik.mjs",
66
"qwik": "./lib/index.qwik.mjs",
@@ -37,24 +37,38 @@
3737
},
3838
"devDependencies": {
3939
"@builder.io/qwik": "1.5.2",
40+
"@eslint/js": "^9.1.1",
4041
"@types/eslint": "^8.56.6",
4142
"@types/node": "^20.11.30",
4243
"@typescript-eslint/eslint-plugin": "^7.3.1",
4344
"@typescript-eslint/parser": "^7.3.1",
44-
"autoprefixer": "^10.4.14",
45-
"eslint": "^8.57.0",
45+
"eslint": "^9.1.1",
4646
"eslint-plugin-qwik": "latest",
47+
"globals": "^15.0.0",
4748
"np": "^8.0.4",
48-
"postcss": "^8.4.31",
4949
"prettier": "^3.2.5",
50-
"prettier-plugin-tailwindcss": "^0.5.4",
51-
"tailwindcss": "3.3.3",
5250
"typescript": "5.3.3",
51+
"typescript-eslint": "^7.7.1",
5352
"undici": "*",
5453
"vite": "^5.1.6",
5554
"vite-tsconfig-paths": "^4.2.1"
5655
},
57-
"prettier": {
58-
"semi": false
59-
}
56+
"repository": {
57+
"type": "git",
58+
"url": "git+https://github.com/jimmynguyen1308/qwiktable.git"
59+
},
60+
"keywords": [
61+
"builder.io",
62+
"qwik",
63+
"component",
64+
"table",
65+
"table-loader",
66+
"ui"
67+
],
68+
"author": "jimmynguyen1308",
69+
"license": "ISC",
70+
"bugs": {
71+
"url": "https://github.com/jimmynguyen1308/qwiktable/issues"
72+
},
73+
"homepage": "https://github.com/jimmynguyen1308/qwiktable#readme"
6074
}

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/TableBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$ } from "@builder.io/qwik"
2-
import { TBodyProps, CellData } from "../types"
2+
import type { TBodyProps, CellData } from "../types"
33

44
export default component$(
55
({ data, headings, classNames, element }: TBodyProps) => {
@@ -21,5 +21,5 @@ export default component$(
2121
})}
2222
</tbody>
2323
)
24-
},
24+
}
2525
)

0 commit comments

Comments
 (0)