fix global filtering with undefined first values

Author: KevinVandy

packages/table-core/src/features/global-filtering/globalFilteringFeature.ts

@@ -28,10 +28,12 @@ export const globalFilteringFeature: TableFeature = {
       onGlobalFilterChange: makeStateUpdater('globalFilter', table),
       globalFilterFn: 'auto',
       getColumnCanGlobalFilter: (column) => {
-        const value = table
+        const row = table
           .getCoreRowModel()
-          .flatRows[0]?.getAllCellsByColumnId()
-          [column.id]?.getValue()
+          .flatRows.find(
+            (row) => row.getAllCellsByColumnId()[column.id]?.getValue() != null,
+          )
+        const value = row?.getAllCellsByColumnId()[column.id]?.getValue()
 
         return typeof value === 'string' || typeof value === 'number'
       },

packages/table-core/tests/implementation/features/column-filtering/createFilteredRowModel.test.ts

@@ -479,6 +479,26 @@ describe('createFilteredRowModel', () => {
   })
 
   describe('global filtering edge cases', () => {
+    it('should filter a column when its first row value is undefined', () => {
+      type NullableNameRow = { name?: string }
+      const nullableColumns: Array<
+        ColumnDef<typeof features, NullableNameRow, any>
+      > = [{ accessorKey: 'name', id: 'name' }]
+
+      const table = constructTable<typeof features, NullableNameRow>({
+        features,
+        columns: nullableColumns,
+        data: [{ name: undefined }, { name: 'hello' }, { name: 'world' }],
+        initialState: {
+          globalFilter: 'hello',
+        },
+      })
+
+      expect(
+        table.getFilteredRowModel().rows.map((row) => row.original.name),
+      ).toEqual(['hello'])
+    })
+
     it('should pass rows through when no columns are globally filterable', () => {
       const table = constructTable<typeof features, TestRow>({
         features,