Skip to content

Commit fab3f1d

Browse files
KevinVandyKevinVandy
committed
chore: refactor features array into object
1 parent ed66ab9 commit fab3f1d

File tree

31 files changed

+230
-158
lines changed

31 files changed

+230
-158
lines changed

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default [
1212
'ts/no-empty-function': 'off',
1313
'no-case-declarations': 'off',
1414
'ts/naming-convention': 'off',
15+
'ts/no-unnecessary-condition': 'warn',
1516
},
1617
},
1718
]

‎examples/lit/filters/src/main.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@ class ColumnFilter extends LitElement {
109109
parseInt((e.target as HTMLInputElement).value, 10),
110110
old[1],
111111
])}"
112-
value=${(columnFilterValue as [number, number])[0] ?? ''}
112+
value=${(
113+
columnFilterValue as [number, number] | undefined
114+
)?.[0] ?? ''}
113115
/>
114116
<input
115117
type="number"
@@ -119,7 +121,9 @@ class ColumnFilter extends LitElement {
119121
parseInt((e.target as HTMLInputElement).value, 10),
120122
old[0],
121123
])}"
122-
value=${(columnFilterValue as [number, number])[1] ?? ''}
124+
value=${(
125+
columnFilterValue as [number, number] | undefined
126+
)?.[1] ?? ''}
123127
/>
124128
</div>
125129
`

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ function Filter({
298298
type="number"
299299
min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
300300
max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
301-
value={(columnFilterValue as [number, number])[0] ?? ''}
301+
value={(columnFilterValue as [number, number] | undefined)?.[0] ?? ''}
302302
onInput$={$((e: InputEvent) => {
303303
const value = Number((e.target as HTMLInputElement).value)
304304
const myCol = table.getColumn(id)
@@ -315,7 +315,7 @@ function Filter({
315315
type="number"
316316
min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
317317
max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
318-
value={(columnFilterValue as [number, number])[1] ?? ''}
318+
value={(columnFilterValue as [number, number] | undefined)?.[1] ?? ''}
319319
onInput$={$((e: InputEvent) => {
320320
const value = Number((e.target as HTMLInputElement).value)
321321
const myCol = table.getColumn(id)

‎examples/react/custom-features/src/main.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ declare module '@tanstack/react-table' {
7171
// end of TS setup!
7272

7373
// Here is all of the actual javascript code for our new feature
74-
export const DensityFeature: TableFeature<any> = {
74+
export const DensityFeature: TableFeature = {
7575
// define the new feature's initial state
7676
_getInitialState: (state): DensityTableState => {
7777
return {
@@ -166,7 +166,7 @@ function App() {
166166
const [density, setDensity] = React.useState<DensityState>('md')
167167

168168
const table = useTable({
169-
_features: [DensityFeature], //pass our custom feature to the table to be instantiated upon creation
169+
_features: { DensityFeature }, //pass our custom feature to the table to be instantiated upon creation
170170
columns,
171171
data,
172172
debugTable: true,
@@ -352,11 +352,13 @@ function Filter({
352352

353353
const columnFilterValue = column.getFilterValue()
354354

355+
console.log('columnFilterValue', { columnFilterValue, table, column })
356+
355357
return typeof firstValue === 'number' ? (
356358
<div className="flex space-x-2">
357359
<input
358360
type="number"
359-
value={(columnFilterValue as [number, number])[0] ?? ''}
361+
value={(columnFilterValue as [number, number] | undefined)?.[0]}
360362
onChange={(e) =>
361363
column.setFilterValue((old: [number, number]) => [
362364
e.target.value,
@@ -368,7 +370,7 @@ function Filter({
368370
/>
369371
<input
370372
type="number"
371-
value={(columnFilterValue as [number, number])[1] ?? ''}
373+
value={(columnFilterValue as [number, number] | undefined)?.[1]}
372374
onChange={(e) =>
373375
column.setFilterValue((old: [number, number]) => [
374376
old[0],

‎examples/react/editable-data/src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ function Filter({
292292
<div className="flex space-x-2">
293293
<input
294294
type="number"
295-
value={(columnFilterValue as [number, number])[0] ?? ''}
295+
value={(columnFilterValue as [number, number] | undefined)?.[0] ?? ''}
296296
onChange={(e) =>
297297
column.setFilterValue((old: [number, number]) => [
298298
e.target.value,
@@ -304,7 +304,7 @@ function Filter({
304304
/>
305305
<input
306306
type="number"
307-
value={(columnFilterValue as [number, number])[1] ?? ''}
307+
value={(columnFilterValue as [number, number] | undefined)?.[1] ?? ''}
308308
onChange={(e) =>
309309
column.setFilterValue((old: [number, number]) => [
310310
old[0],

‎examples/react/expanding/src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ function Filter({
277277
<div className="flex space-x-2">
278278
<input
279279
type="number"
280-
value={(columnFilterValue as [number, number])[0]}
280+
value={(columnFilterValue as [number, number] | undefined)?.[0]}
281281
onChange={(e) =>
282282
column.setFilterValue((old: [number, number]) => [
283283
e.target.value,
@@ -289,7 +289,7 @@ function Filter({
289289
/>
290290
<input
291291
type="number"
292-
value={(columnFilterValue as [number, number])[1]}
292+
value={(columnFilterValue as [number, number] | undefined)?.[1]}
293293
onChange={(e) =>
294294
column.setFilterValue((old: [number, number]) => [
295295
old[0],

‎examples/react/filters-faceted/src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
267267
type="number"
268268
min={Number(minMaxValues?.[0] ?? '')}
269269
max={Number(minMaxValues?.[1] ?? '')}
270-
value={(columnFilterValue as [number, number])[0] ?? ''}
270+
value={(columnFilterValue as [number, number] | undefined)?.[0] ?? ''}
271271
onChange={(value) =>
272272
column.setFilterValue((old: [number, number]) => [value, old[1]])
273273
}
@@ -280,7 +280,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
280280
type="number"
281281
min={Number(minMaxValues?.[0] ?? '')}
282282
max={Number(minMaxValues?.[1] ?? '')}
283-
value={(columnFilterValue as [number, number])[1] ?? ''}
283+
value={(columnFilterValue as [number, number] | undefined)?.[1] ?? ''}
284284
onChange={(value) =>
285285
column.setFilterValue((old: [number, number]) => [old[0], value])
286286
}

‎examples/react/filters-fuzzy/src/main.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ declare module '@tanstack/react-table' {
3333
fuzzy: FilterFn<unknown>
3434
}
3535
interface FilterMeta {
36-
itemRank: RankingInfo
36+
itemRank?: RankingInfo
3737
}
3838
}
3939

@@ -56,10 +56,10 @@ const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
5656
let dir = 0
5757

5858
// Only sort by rank if the column has ranking information
59-
if (rowA.columnFiltersMeta[columnId]) {
59+
if (rowA.columnFiltersMeta?.[columnId]) {
6060
dir = compareItems(
61-
rowA.columnFiltersMeta[columnId].itemRank,
62-
rowB.columnFiltersMeta[columnId].itemRank,
61+
rowA.columnFiltersMeta[columnId].itemRank!,
62+
rowB.columnFiltersMeta[columnId].itemRank!,
6363
)
6464
}
6565

@@ -73,7 +73,7 @@ function App() {
7373
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
7474
[],
7575
)
76-
const [globalFilter, setGlobalFilter] = React.useState('')
76+
const [globalFilter, setGlobalFilter] = React.useState<string | undefined>('')
7777

7878
const columns = React.useMemo<Array<ColumnDef<Person, any>>>(
7979
() => [

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -255,18 +255,24 @@ function Filter({ column }: { column: Column<any, unknown> }) {
255255
{/* See faceted column filters example for min max values functionality */}
256256
<DebouncedInput
257257
type="number"
258-
value={(columnFilterValue as [number, number])[0] ?? ''}
258+
value={(columnFilterValue as [number, number] | undefined)?.[0] ?? ''}
259259
onChange={(value) =>
260-
column.setFilterValue((old: [number, number]) => [value, old[1]])
260+
column.setFilterValue((old: [number, number] | undefined) => [
261+
value,
262+
old?.[1],
263+
])
261264
}
262265
placeholder={`Min`}
263266
className="w-24 border shadow rounded"
264267
/>
265268
<DebouncedInput
266269
type="number"
267-
value={(columnFilterValue as [number, number])[1] ?? ''}
270+
value={(columnFilterValue as [number, number] | undefined)?.[1] ?? ''}
268271
onChange={(value) =>
269-
column.setFilterValue((old: [number, number]) => [old[0], value])
272+
column.setFilterValue((old: [number, number] | undefined) => [
273+
old?.[0],
274+
value,
275+
])
270276
}
271277
placeholder={`Max`}
272278
className="w-24 border shadow rounded"

‎examples/react/kitchen-sink/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const App = () => {
8282
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
8383
[],
8484
)
85-
const [globalFilter, setGlobalFilter] = React.useState('')
85+
const [globalFilter, setGlobalFilter] = React.useState<string | undefined>('')
8686

8787
const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()
8888

0 commit comments

Comments
 (0)