-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update the qwik adapter a little bit
- Loading branch information
1 parent
9a6f472
commit 424301c
Showing
6 changed files
with
166 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { constructTableHelper } from '@tanstack/table-core' | ||
import { useTable } from './useTable' | ||
import type { NoSerialize } from '@builder.io/qwik' | ||
import type { | ||
RowData, | ||
Table, | ||
TableFeatures, | ||
TableHelperOptions, | ||
TableHelper_Core, | ||
TableOptions, | ||
} from '@tanstack/table-core' | ||
|
||
export type TableHelper< | ||
TFeatures extends TableFeatures, | ||
TData extends RowData = any, | ||
> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & { | ||
useTable: ( | ||
tableOptions: Omit< | ||
TableOptions<TFeatures, TData>, | ||
'_features' | '_rowModels' | ||
>, | ||
) => NoSerialize<Table<TFeatures, TData>> | ||
} | ||
|
||
export function createTableHelper< | ||
TFeatures extends TableFeatures, | ||
TDataList extends Array<RowData> = Array<any>, | ||
>( | ||
tableHelperOptions: TableHelperOptions<TFeatures, TDataList>, | ||
): TableHelper<TFeatures, TDataList[number]> { | ||
const tableHelper = constructTableHelper(useTable as any, tableHelperOptions) | ||
return { | ||
...tableHelper, | ||
useTable: tableHelper.tableCreator, | ||
} as unknown as TableHelper<TFeatures, TDataList[number]> | ||
} | ||
|
||
// test | ||
|
||
// type Person = { | ||
// firstName: string | ||
// lastName: string | ||
// age: number | ||
// } | ||
|
||
// const tableHelper = createTableHelper({ | ||
// _features: { rowSelectionFeature: {} }, | ||
// TData: {} as Person, | ||
// }) | ||
|
||
// const columns = [ | ||
// tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }), | ||
// tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }), | ||
// tableHelper.columnHelper.accessor('age', { header: 'Age' }), | ||
// tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }), | ||
// ] as Array<ColumnDef<typeof tableHelper.features, Person, unknown>> | ||
|
||
// const data: Array<Person> = [] | ||
|
||
// tableHelper.useTable({ | ||
// columns, | ||
// data, | ||
// }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { isFunction } from '@tanstack/table-core' | ||
import type { Component, FunctionComponent } from '@builder.io/qwik' | ||
|
||
type QwikComps = Component | FunctionComponent | ||
|
||
const isQwikComponent = (comp: unknown): comp is QwikComps => | ||
isFunction(comp) && comp.name === 'QwikComponent' | ||
|
||
export function flexRender<TProps extends object>( | ||
Comp: any, // TODO: add renderable type | ||
props: TProps, | ||
) { | ||
return !Comp ? null : isQwikComponent(Comp) ? ( | ||
<Comp {...props} /> | ||
) : isFunction(Comp) ? ( | ||
Comp(props) | ||
) : ( | ||
Comp | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,70 +1,4 @@ | ||
import * as Qwik from '@builder.io/qwik' | ||
import { constructTable, isFunction } from '@tanstack/table-core' | ||
import type { | ||
RowData, | ||
Table, | ||
TableFeatures, | ||
TableOptions, | ||
} from '@tanstack/table-core' | ||
|
||
export * from './createTableHelper' | ||
export * from './flexRender' | ||
export * from './useTable' | ||
export * from '@tanstack/table-core' | ||
|
||
type QwikComps = Qwik.Component | Qwik.FunctionComponent | ||
|
||
const isQwikComponent = (comp: unknown): comp is QwikComps => | ||
isFunction(comp) && comp.name === 'QwikComponent' | ||
|
||
export function flexRender<TProps extends object>( | ||
Comp: any, // TODO: add renderable type | ||
props: TProps, | ||
) { | ||
return !Comp ? null : isQwikComponent(Comp) ? ( | ||
<Comp {...props} /> | ||
) : isFunction(Comp) ? ( | ||
Comp(props) | ||
) : ( | ||
Comp | ||
) | ||
} | ||
|
||
export function useTable< | ||
TFeatures extends TableFeatures, | ||
TData extends RowData, | ||
>(options: TableOptions<TFeatures, TData>) { | ||
// Compose in the generic options to the user options | ||
const resolvedOptions: TableOptions<TFeatures, TData> = { | ||
state: {}, | ||
onStateChange: () => {}, | ||
renderFallbackValue: null, | ||
...options, | ||
} | ||
|
||
// Create a new table instance and store it in a Qwik store | ||
const table = Qwik.useStore<{ | ||
instance: Qwik.NoSerialize<Table<TFeatures, TData>> | ||
}>({ | ||
instance: Qwik.noSerialize(constructTable(resolvedOptions)), | ||
}) | ||
|
||
// By default, manage table state here using the table's initial state | ||
const state = Qwik.useSignal(table.instance!.initialState) | ||
|
||
// Compose the default state above with any user state. This will allow the user | ||
// to only control a subset of the state if desired. | ||
table.instance!.setOptions((prev) => ({ | ||
...prev, | ||
...options, | ||
state: { | ||
...state.value, | ||
...options.state, | ||
}, | ||
// Similarly, we'll maintain both our internal state and any user-provided | ||
// state. | ||
onStateChange: (updater) => { | ||
state.value = isFunction(updater) ? updater(state.value) : updater | ||
options.onStateChange?.(updater) | ||
}, | ||
})) | ||
|
||
return table.instance! as Table<TFeatures, TData> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { noSerialize, useSignal, useStore } from '@builder.io/qwik' | ||
import { | ||
constructTable, | ||
coreFeatures, | ||
getInitialTableState, | ||
isFunction, | ||
} from '@tanstack/table-core' | ||
import type { NoSerialize } from '@builder.io/qwik' | ||
import type { | ||
RowData, | ||
Table, | ||
TableFeatures, | ||
TableOptions, | ||
} from '@tanstack/table-core' | ||
|
||
export function useTable< | ||
TFeatures extends TableFeatures, | ||
TData extends RowData, | ||
>(tableOptions: TableOptions<TFeatures, TData>): Table<TFeatures, TData> { | ||
const _features = { ...coreFeatures, ...tableOptions._features } | ||
|
||
const state = useSignal( | ||
getInitialTableState(_features, tableOptions.initialState), | ||
) | ||
|
||
const statefulOptions: TableOptions<TFeatures, TData> = { | ||
...tableOptions, | ||
_features, | ||
state: { | ||
...state.value, | ||
...tableOptions.state, | ||
}, | ||
onStateChange: (updater) => { | ||
state.value = isFunction(updater) ? updater(state.value) : updater | ||
tableOptions.onStateChange?.(updater) | ||
}, | ||
} | ||
|
||
const table = useStore<{ | ||
instance: NoSerialize<Table<TFeatures, TData>> | ||
}>({ | ||
instance: noSerialize(constructTable(statefulOptions)), | ||
}) | ||
|
||
return table.instance! | ||
} |