Skip to content

Commit 424301c

Browse files
KevinVandyKevinVandy
committed
update the qwik adapter a little bit
1 parent 9a6f472 commit 424301c

6 files changed

Lines changed: 166 additions & 91 deletions

File tree

‎examples/qwik/filters/src/main.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
createSortedRowModel,
1414
filterFns,
1515
flexRender,
16+
globalFilteringFeature,
1617
rowPaginationFeature,
1718
rowSortingFeature,
1819
sortFns,
@@ -115,6 +116,7 @@ const _features = tableFeatures({
115116
columnFilteringFeature,
116117
rowPaginationFeature,
117118
rowSortingFeature,
119+
globalFilteringFeature,
118120
})
119121

120122
const columnHelper = createColumnHelper<typeof _features, Person>()
@@ -123,7 +125,7 @@ const columns = columnHelper.columns([
123125
columnHelper.group({
124126
header: 'Name',
125127
footer: (props) => props.column.id,
126-
columns: [
128+
columns: columnHelper.columns([
127129
columnHelper.accessor('firstName', {
128130
cell: (info) => info.getValue(),
129131
footer: (props) => props.column.id,
@@ -142,19 +144,19 @@ const columns = columnHelper.columns([
142144
footer: (props) => props.column.id,
143145
sortFn: fuzzySort,
144146
}),
145-
],
147+
]),
146148
}),
147149
columnHelper.group({
148150
header: 'Info',
149151
footer: (props) => props.column.id,
150-
columns: [
152+
columns: columnHelper.columns([
151153
columnHelper.accessor('age', {
152154
header: () => 'Age',
153155
footer: (props) => props.column.id,
154156
}),
155157
columnHelper.group({
156158
header: 'More Info',
157-
columns: [
159+
columns: columnHelper.columns([
158160
columnHelper.accessor('visits', {
159161
header: () => <span>Visits</span>,
160162
footer: (props) => props.column.id,
@@ -167,9 +169,9 @@ const columns = columnHelper.columns([
167169
header: 'Profile Progress',
168170
footer: (props) => props.column.id,
169171
}),
170-
],
172+
]),
171173
}),
172-
],
174+
]),
173175
}),
174176
])
175177

@@ -190,12 +192,9 @@ const App = component$(() => {
190192
paginatedRowModel: createPaginatedRowModel(),
191193
sortedRowModel: createSortedRowModel(sortFns),
192194
},
193-
data: defaultData,
194195
columns,
196+
data: defaultData,
195197
enableSorting: true,
196-
filterFns: {
197-
fuzzy: fuzzyFilter,
198-
},
199198
state: {
200199
columnFilters: columnFilters.value,
201200
globalFilter: globalFilter.value,
@@ -242,16 +241,19 @@ const App = component$(() => {
242241
? 'cursor-pointer select-none'
243242
: ''
244243
}
245-
onClick={header.column.getToggleSortingHandler()}
244+
onClick$={$(() => {
245+
header.column.getToggleSortingHandler()
246+
})}
246247
>
247248
{flexRender(
248249
header.column.columnDef.header,
249250
header.getContext(),
250251
)}
251-
{{
252-
asc: ' 🔼',
253-
desc: ' 🔽',
254-
}[header.column.getIsSorted() as string] ?? null}
252+
{header.column.getIsSorted()
253+
? header.column.getIsSorted() === 'asc'
254+
? ' 🔼'
255+
: ' 🔽'
256+
: null}
255257
</div>
256258
{header.column.getCanFilter() ? (
257259
<div>
@@ -270,7 +272,7 @@ const App = component$(() => {
270272
{table.getRowModel().rows.map((row) => {
271273
return (
272274
<tr key={row.id}>
273-
{row.getVisibleCells().map((cell) => (
275+
{row.getAllCells().map((cell) => (
274276
<td key={cell.id}>
275277
{flexRender(cell.column.columnDef.cell, cell.getContext())}
276278
</td>
@@ -290,8 +292,8 @@ function Filter({
290292
column,
291293
table,
292294
}: {
293-
column: Column<any, unknown>
294-
table: Table<any>
295+
column: Column<typeof _features, Person>
296+
table: Table<typeof _features, Person>
295297
}) {
296298
const { id } = column
297299
const firstValue = table

‎examples/qwik/row-selection/src/main.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
tableFeatures,
1515
useTable,
1616
} from '@tanstack/qwik-table'
17+
import type { JSX } from '@builder.io/qwik'
1718
import type { ColumnDef } from '@tanstack/qwik-table'
1819

1920
type Person = {
@@ -226,12 +227,21 @@ const App = component$(() => {
226227
)
227228
})
228229

229-
const IndeterminateCheckbox = component$<{
230-
indeterminate?: boolean
231-
}>(({ indeterminate, ...rest }) => {
230+
const IndeterminateCheckbox = component$<
231+
Omit<JSX.IntrinsicElements['input'], 'type'> & {
232+
indeterminate?: boolean
233+
}
234+
>(({ indeterminate, ...rest }) => {
232235
const inputSig = useSignal<Element | undefined>()
233236

234-
return <input type="checkbox" ref={inputSig} {...rest} />
237+
return (
238+
<input
239+
type="checkbox"
240+
ref={inputSig}
241+
indeterminate={indeterminate}
242+
{...rest}
243+
/>
244+
)
235245
})
236246

237247
render(document.getElementById('app') as HTMLElement, <App />)

‎packages/qwik-table/src/createTableHelper.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { constructTableHelper } from '@tanstack/table-core'
2+
import { useTable } from './useTable'
3+
import type { NoSerialize } from '@builder.io/qwik'
4+
import type {
5+
RowData,
6+
Table,
7+
TableFeatures,
8+
TableHelperOptions,
9+
TableHelper_Core,
10+
TableOptions,
11+
} from '@tanstack/table-core'
12+
13+
export type TableHelper<
14+
TFeatures extends TableFeatures,
15+
TData extends RowData = any,
16+
> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & {
17+
useTable: (
18+
tableOptions: Omit<
19+
TableOptions<TFeatures, TData>,
20+
'_features' | '_rowModels'
21+
>,
22+
) => NoSerialize<Table<TFeatures, TData>>
23+
}
24+
25+
export function createTableHelper<
26+
TFeatures extends TableFeatures,
27+
TDataList extends Array<RowData> = Array<any>,
28+
>(
29+
tableHelperOptions: TableHelperOptions<TFeatures, TDataList>,
30+
): TableHelper<TFeatures, TDataList[number]> {
31+
const tableHelper = constructTableHelper(useTable as any, tableHelperOptions)
32+
return {
33+
...tableHelper,
34+
useTable: tableHelper.tableCreator,
35+
} as unknown as TableHelper<TFeatures, TDataList[number]>
36+
}
37+
38+
// test
39+
40+
// type Person = {
41+
// firstName: string
42+
// lastName: string
43+
// age: number
44+
// }
45+
46+
// const tableHelper = createTableHelper({
47+
// _features: { rowSelectionFeature: {} },
48+
// TData: {} as Person,
49+
// })
50+
51+
// const columns = [
52+
// tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }),
53+
// tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }),
54+
// tableHelper.columnHelper.accessor('age', { header: 'Age' }),
55+
// tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }),
56+
// ] as Array<ColumnDef<typeof tableHelper.features, Person, unknown>>
57+
58+
// const data: Array<Person> = []
59+
60+
// tableHelper.useTable({
61+
// columns,
62+
// data,
63+
// })

‎packages/qwik-table/src/flexRender.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { isFunction } from '@tanstack/table-core'
2+
import type { Component, FunctionComponent } from '@builder.io/qwik'
3+
4+
type QwikComps = Component | FunctionComponent
5+
6+
const isQwikComponent = (comp: unknown): comp is QwikComps =>
7+
isFunction(comp) && comp.name === 'QwikComponent'
8+
9+
export function flexRender<TProps extends object>(
10+
Comp: any, // TODO: add renderable type
11+
props: TProps,
12+
) {
13+
return !Comp ? null : isQwikComponent(Comp) ? (
14+
<Comp {...props} />
15+
) : isFunction(Comp) ? (
16+
Comp(props)
17+
) : (
18+
Comp
19+
)
20+
}

‎packages/qwik-table/src/index.tsx‎

Lines changed: 3 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,4 @@
1-
import * as Qwik from '@builder.io/qwik'
2-
import { constructTable, isFunction } from '@tanstack/table-core'
3-
import type {
4-
RowData,
5-
Table,
6-
TableFeatures,
7-
TableOptions,
8-
} from '@tanstack/table-core'
9-
1+
export * from './createTableHelper'
2+
export * from './flexRender'
3+
export * from './useTable'
104
export * from '@tanstack/table-core'
11-
12-
type QwikComps = Qwik.Component | Qwik.FunctionComponent
13-
14-
const isQwikComponent = (comp: unknown): comp is QwikComps =>
15-
isFunction(comp) && comp.name === 'QwikComponent'
16-
17-
export function flexRender<TProps extends object>(
18-
Comp: any, // TODO: add renderable type
19-
props: TProps,
20-
) {
21-
return !Comp ? null : isQwikComponent(Comp) ? (
22-
<Comp {...props} />
23-
) : isFunction(Comp) ? (
24-
Comp(props)
25-
) : (
26-
Comp
27-
)
28-
}
29-
30-
export function useTable<
31-
TFeatures extends TableFeatures,
32-
TData extends RowData,
33-
>(options: TableOptions<TFeatures, TData>) {
34-
// Compose in the generic options to the user options
35-
const resolvedOptions: TableOptions<TFeatures, TData> = {
36-
state: {},
37-
onStateChange: () => {},
38-
renderFallbackValue: null,
39-
...options,
40-
}
41-
42-
// Create a new table instance and store it in a Qwik store
43-
const table = Qwik.useStore<{
44-
instance: Qwik.NoSerialize<Table<TFeatures, TData>>
45-
}>({
46-
instance: Qwik.noSerialize(constructTable(resolvedOptions)),
47-
})
48-
49-
// By default, manage table state here using the table's initial state
50-
const state = Qwik.useSignal(table.instance!.initialState)
51-
52-
// Compose the default state above with any user state. This will allow the user
53-
// to only control a subset of the state if desired.
54-
table.instance!.setOptions((prev) => ({
55-
...prev,
56-
...options,
57-
state: {
58-
...state.value,
59-
...options.state,
60-
},
61-
// Similarly, we'll maintain both our internal state and any user-provided
62-
// state.
63-
onStateChange: (updater) => {
64-
state.value = isFunction(updater) ? updater(state.value) : updater
65-
options.onStateChange?.(updater)
66-
},
67-
}))
68-
69-
return table.instance! as Table<TFeatures, TData>
70-
}

‎packages/qwik-table/src/useTable.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { noSerialize, useSignal, useStore } from '@builder.io/qwik'
2+
import {
3+
constructTable,
4+
coreFeatures,
5+
getInitialTableState,
6+
isFunction,
7+
} from '@tanstack/table-core'
8+
import type { NoSerialize } from '@builder.io/qwik'
9+
import type {
10+
RowData,
11+
Table,
12+
TableFeatures,
13+
TableOptions,
14+
} from '@tanstack/table-core'
15+
16+
export function useTable<
17+
TFeatures extends TableFeatures,
18+
TData extends RowData,
19+
>(tableOptions: TableOptions<TFeatures, TData>): Table<TFeatures, TData> {
20+
const _features = { ...coreFeatures, ...tableOptions._features }
21+
22+
const state = useSignal(
23+
getInitialTableState(_features, tableOptions.initialState),
24+
)
25+
26+
const statefulOptions: TableOptions<TFeatures, TData> = {
27+
...tableOptions,
28+
_features,
29+
state: {
30+
...state.value,
31+
...tableOptions.state,
32+
},
33+
onStateChange: (updater) => {
34+
state.value = isFunction(updater) ? updater(state.value) : updater
35+
tableOptions.onStateChange?.(updater)
36+
},
37+
}
38+
39+
const table = useStore<{
40+
instance: NoSerialize<Table<TFeatures, TData>>
41+
}>({
42+
instance: noSerialize(constructTable(statefulOptions)),
43+
})
44+
45+
return table.instance!
46+
}

0 commit comments

Comments
 (0)