Skip to content

Commit d0ce6e5

Browse files
jn138jn138
committed
qwik update: version 0.0.7
1 parent 8611f18 commit d0ce6e5

File tree

13 files changed

+454
-255
lines changed

13 files changed

+454
-255
lines changed

‎README.md‎

Lines changed: 340 additions & 136 deletions
Large diffs are not rendered by default.

src/components/FilterInput.tsx renamed to components/FilterInput.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ export default component$(
55
({ classList, heading, filterConfigs }: FilterInputProps) => (
66
<input
77
type="text"
8-
class={
9-
classList ||
10-
"w-full bg-white font-normal text-black text-[14px] border rounded-md p-1"
11-
}
8+
class={classList}
129
onInput$={$(
1310
(event: any) =>
1411
(filterConfigs.params = {

src/components/SortArrows.tsx renamed to components/SortArrows.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,17 @@ const SvgArrowDown = (props: QwikIntrinsicElements["svg"], key: string) => {
3434
export default component$(
3535
({
3636
heading,
37-
classList,
37+
classList = {
38+
container: "flex flex-col select-none cursor-pointer",
39+
arrowUp: "mb-[-8.5px]",
40+
arrowDown: "mb-[-8.5px]",
41+
},
3842
sortConfigs,
3943
highlightColor,
4044
defaultColor,
4145
}: SortArrowsProps) => (
4246
<div
43-
class={classList?.container || "flex flex-col select-none cursor-pointer"}
47+
class={classList.container}
4448
onClick$={$(() => {
4549
if (sortConfigs.param === heading) {
4650
sortConfigs.order = ((sortConfigs.order + 1) % 3) as 0 | 1 | 2
@@ -51,7 +55,7 @@ export default component$(
5155
})}
5256
>
5357
<SvgArrowUp
54-
class={classList?.arrowUp || "mb-[-8.5px]"}
58+
class={classList.arrowUp}
5559
width={24}
5660
height={24}
5761
color={
@@ -61,7 +65,7 @@ export default component$(
6165
}
6266
/>
6367
<SvgArrowDown
64-
class={classList?.arrowDown || "mb-[-8.5px]"}
68+
class={classList.arrowDown}
6569
width={24}
6670
height={24}
6771
color={

src/components/Table.tsx renamed to components/TableLoader.tsx

Lines changed: 60 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,60 @@ export default component$(
3131
tData: tData,
3232
tHeadings: {
3333
headingList: Object.keys(tData[0]),
34+
classList: tHeadings?.classList || "table-heading",
3435
customHeadings: { ...tHeadings?.customHeadings },
35-
...tHeadings!,
36+
...tHeadings,
3637
},
3738
tColumns: {
39+
classList: tColumns?.classList || "table-column",
3840
...tColumns,
3941
},
4042
tRows: {
43+
classList: tRows?.classList || "table-row",
4144
...tRows,
4245
},
4346
tableOptions: {
47+
classList: {
48+
table: tableOptions?.classList?.table || "table",
49+
thead: tableOptions?.classList?.thead || "table-head",
50+
theadWrapper:
51+
tableOptions?.classList?.theadWrapper ||
52+
"table-head-wrapper flex flex-col",
53+
headArrowWrapper:
54+
tableOptions?.classList?.headArrowWrapper ||
55+
"head-arrow-wrapper flex flex-row items-center justify-between gap-[10px]",
56+
sortArrows: {
57+
container:
58+
tableOptions?.classList?.sortArrows?.container ||
59+
"sort-arrow-container flex flex-col select-none cursor-pointer",
60+
arrowUp:
61+
tableOptions?.classList?.sortArrows?.arrowUp ||
62+
"sort-arrow-up mb-[-8.5px]",
63+
arrowDown:
64+
tableOptions?.classList?.sortArrows?.arrowDown ||
65+
"ort-arrow-down mb-[-8.5px]",
66+
},
67+
filterInput: {
68+
container:
69+
tableOptions?.classList?.filterInput?.container ||
70+
"filter-input-container relative min-h-[30px] flex items-center",
71+
input:
72+
tableOptions?.classList?.filterInput?.input ||
73+
"filter-input w-full bg-white font-normal text-black text-[14px] border rounded-md p-1",
74+
},
75+
tbody: tableOptions?.classList?.tbody || "table-body",
76+
},
4477
...tableOptions,
4578
},
4679
sortOptions: {
4780
defaultColor: sortOptions?.defaultColor || "#aaa",
4881
highlightColor: sortOptions?.highlightColor || "#484848",
4982
...sortOptions,
5083
},
51-
filterOptions: {
52-
...filterOptions,
53-
},
84+
filterOptions: filterOptions,
5485
})
55-
5686
useTask$(async ({ track }) => {
5787
track(() => [sortConfigs.param, sortConfigs.order, filterConfigs.params])
58-
5988
const filteredData = tData.filter((record: TableRecord) => {
6089
let i = 0
6190
tableData.tHeadings.headingList.map((param: string) => {
@@ -82,8 +111,8 @@ export default component$(
82111
})
83112

84113
return (
85-
<table class={tableData.tableOptions?.classList}>
86-
<thead>
114+
<table class={tableData.tableOptions?.classList?.table}>
115+
<thead class={tableData.tableOptions?.classList?.thead}>
87116
<tr>
88117
{tableData.tHeadings.headingList.map(
89118
(heading: string, index: number) => (
@@ -95,8 +124,12 @@ export default component$(
95124
${tableData.tColumns?.columnClassList?.[heading]}
96125
`}
97126
>
98-
<div class="flex flex-col">
99-
<div class="flex flex-row items-center justify-between gap-[10px]">
127+
<div class={tableData.tableOptions?.classList?.theadWrapper}>
128+
<div
129+
class={
130+
tableData.tableOptions?.classList?.headArrowWrapper
131+
}
132+
>
100133
{Object.keys(
101134
tableData.tHeadings.customHeadings || []
102135
).includes(heading)
@@ -109,17 +142,9 @@ export default component$(
109142
{tableData.sortOptions?.params?.includes(heading) && (
110143
<SortArrows
111144
heading={heading}
112-
classList={{
113-
container:
114-
tableData.tableOptions?.sortArrowsClassList
115-
?.container,
116-
arrowUp:
117-
tableData.tableOptions?.sortArrowsClassList
118-
?.arrowUp,
119-
arrowDown:
120-
tableData.tableOptions?.sortArrowsClassList
121-
?.arrowDown,
122-
}}
145+
classList={
146+
tableData.tableOptions?.classList?.sortArrows
147+
}
123148
sortConfigs={sortConfigs}
124149
highlightColor={tableData.sortOptions.highlightColor}
125150
defaultColor={tableData.sortOptions.defaultColor}
@@ -128,19 +153,25 @@ export default component$(
128153
</div>
129154
{Object.keys(tableData.filterOptions?.params || []).length >
130155
0 && (
131-
<div class="relative min-h-[30px] flex items-center">
156+
<div
157+
class={
158+
tableData.tableOptions?.classList?.filterInput
159+
?.container
160+
}
161+
>
132162
{tableData.filterOptions?.params?.[heading] ===
133163
"search" ? (
134164
<FilterInput
135165
classList={
136-
tableData.tableOptions?.filterInputClassList
166+
tableData.tableOptions?.classList?.filterInput
167+
?.input
137168
}
138169
heading={heading}
139170
filterConfigs={filterConfigs}
140171
/>
141172
) : tableData.filterOptions?.params?.[heading] ===
142173
"options" ? (
143-
<></>
174+
<></> // "options" filter feature (tba)
144175
) : (
145176
<></>
146177
)}
@@ -152,7 +183,7 @@ export default component$(
152183
)}
153184
</tr>
154185
</thead>
155-
<tbody>
186+
<tbody class={tableData.tableOptions?.classList?.tbody}>
156187
{tableData.tData.map((record: TableRecord, index: number) => {
157188
return (
158189
<tr key={index}>
@@ -161,10 +192,10 @@ export default component$(
161192
<td
162193
key={index}
163194
class={`
164-
${tableData.tRows?.classList}
165-
${tableData.tColumns?.classList}
166-
${tableData.tColumns?.columnClassList?.[param]}
167-
`}
195+
${tableData.tRows?.classList}
196+
${tableData.tColumns?.classList}
197+
${tableData.tColumns?.columnClassList?.[param]}
198+
`}
168199
>
169200
{tableData.tColumns?.element$?.[param]?.(record, param) ||
170201
tableData.tColumns?.customColumns?.[param]?.(

‎example/BasicTable.tsx‎

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

‎example/index.tsx‎

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

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "qwik-table-loader",
3-
"version": "0.0.5-uat",
3+
"version": "0.0.7",
44
"description": "A table library for Qwik",
5-
"main": "src/index.ts",
5+
"main": "components/TableLoader.tsx",
66
"engines": {
77
"node": ">=16.0.0"
88
},

‎src/index.ts‎

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

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,5 @@
2222
}
2323
},
2424
"files": ["./.eslintrc.cjs"],
25-
"include": ["src", "./*.d.ts", "./*.config.ts"]
25+
"include": ["components", "types", "./*.d.ts", "./*.config.ts"]
2626
}

0 commit comments

Comments
 (0)