Wrong type for GlobalFilterTableState

[JoachimKoenigslieb]

TanStack Table version

8.20.5

Framework/Library version

Svelte 5.0.0

Describe the bug and the steps to reproduce it

Hi guys,

I think there some issues with the

export interface GlobalFilterTableState {
   globalFilter: any;
}

Definitions. When used with TableState this any is poisoning everything. It turns out that run-time behaviour expects that the tableState look something like:

// createSvelteTable calls createTable. This is shadcn writing an adapter.
	const table = createSvelteTable({
                ...otherProps,
		state: {
			get globalFilter() {
                                // this should return a string to filter on! But since TableState extends from (among others) GlobalFilterTableState the return value can be `any`.  
				return globalFilter.globalFilter;
			}
		},
	});

This was a pretty big problem as I thought I could just return something shaped like a GlobalFilterTableState:

	let myGlobalFilterState= $derived.by(() => {
		return { globalFilter: params.q } satisfies GlobalFilterTableState; // THIS IS A TYPE ERROR IN THE LIB... I SPENT 1 HOUR FINDING THIS....
	});

	const table = createSvelteTable({
                ...otherProps,
		state: {
			get globalFilter() {
                                // this should return a string to filter on! But since TableState extends from (among others) GlobalFilterTableState the return value can be `any`.  
				return myGlobalFilterState; // this passes typescript but gives unexpected results at runtime! It should be a string here!
			}
		},
	});

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://www.typescriptlang.org/play/?#code/JASwtgDg9gTgLgAgN4ChjDgTwgUwQYSgBsBXMAOwBEcAzAGjWAHMc5CYcAlKAdwFkoAExxEG6FnABiIInBwdB3fkJFjmrAMqw5i3gOGjGWXAgDiRKACMAhkWmz5AFWuWiODXGtyxAXwQ0YKDAEACIAAU9yAGdPAGMAawB6T1ccAFpY2BwQgG4UFESAKgQcKKIQcjg0wRAolzcEWIALHAS0mhkcRI63cmswdL6wCqYMqHIANxxKkHGEQsSUcGh4ZDRjPCVKL2sxDYRnVIB5CDhZ6L3sPEO3E7PxqM5S4inBS5Mb909vNFiOLxwnxQfgCQVCEWs0TiSRSbjGHFy+SKhRQ8wI-zkUQQ1gQ-1iZymB0hHmsCQQsLwVgAVq1EDRYAgNFMHAA6VHFMIQawwfoIKCnc5Yz58gUPclQRoYvBwFrk+p4HggGVstFhDhwEgwaIIACCuJwpIJ0vlfMsNPxKo5OAAHv0IG52QgAAYuqLMuSOgA8UT+IFOAD5HQhGg9EBSEABeSUGuRMkRyT4ACiQCBZaYQPgAlF7Ej6YH64IH5l6KUXisHPTKDYIy8G60gAMQG5py1IsiQACWr8lMgRIECiicz2KxLWswhgvag-Z8QbrFbgMFr8-njebTQQY4nU-7LK38ix1lH3Zgs7RK5XlY3mSIUS55AjSH3MBZN40958y4vCGAdc9kjca0nnICcQ0qaY4EfZ9X2IMhyBg0gKGoGg9xPPxMnA61IKfE921YQhMLgIc-ESL8L1-T1kiaMiVyQRJ1zPctL2SJc52DOiGLnSiq3HWsKIAQjSNJU3TITa24+VaxdJ12UWG0VjpEhyHxc5owBOMHE+T1HG2TwSiw6ZBCxLYdn9RN+XuaIAC4iWOUVom03TrH9YdUGADCYn1KIXhwQQ7kFGzPn8h4nm8ohXkc0zIwQAYYBYI4zVpQdGDc9AYgBGykB8NRgHGEk5HwJpIRYIdkGyxhgA4ED5EkWwiBsBIADVbBIHAbPIEgiEMdBgFi+L7KiGzEwq4BhBoaxOrgYLrNs24Bsizx-Ry3KBpsgAFbkzlsbT5WmqIFucwMeuHCN-TWHrKtYTVyBi+R4sS-FBzGibZD2ugRUsqJMzyHrZ3Qcr0AswU0G+-J3NDVsGijP4Y0BeVEw4MLXj20HgDcRB0rkaKABJMZwT0NvgEBts+fKcH9MyKRZColWJogydBtAaCUlS5n7QQAT20rUqpqJWC5xMIA4CYTrO1LLo1LVbrinAEvNOBByFnAJneoGHne8XgDxmy+tlh6FcTPHVYGlk8YQAAfc2yszBgRsSRISjKCoqhqOpUjScgbSqcpPYQCIrjzAs0lKH24EScgoGD617RAWIlTSSFMBGvLvhwQrirahBE3ZgEYBsxPRfOi6QBoLOc7kGAEAqdLlJwKBS8kFnLOHM2o3L+RDdT1GLpEPmEFb6X7vlwcjYQduYEZi6Vs+lkU4BdPyBYAB+Fls4gDmK+7-6KqzH7gF3tBZzQduucn7HaBoWkWSVxNStOouT4GocfoP34HmIHAWQsJhEypiRzCsLYewFdJDkCHKjDyH8v5QB-jDAESYUxphZIjHyfkBrvSYBYGwdgZAgPIDZEIE04BQBCBmTMeE4AAOwcAmqYDMyT3VNdSGOA8hH2RI6Pgd1SimmHuKCQLRK48CaJ0BA8QcA4AgCMckLQQCVwkBXQ85QpiWiJGIm6oJghaHKIIAAUhoTKYQfbxE3HAOAA4rL2yYEqJoJBLAwTALmYgIBBBUiiI47RiRXBWESAAJgACwuFiAADh8QAVliAABgAJxRIAGw0EED4ywwTYgAEZhCpL8VE1JtAcBROsAAdhwAUvxABmawNAaCJC5AkawLA3FhWcbmGAsRczyCmDARIVUJwjBZArBsAAZEJaQBmpNSaExiixmbKUsoPPWw9tJmW8pqWImdHCZkCnkaZrMbq6zlklbS70ACqSzpwtLWe9ZZ5zUk2SORsg4CAABkCAjlbKbqpPZ+t9qOGOe9RqpyVkXP7mc1ZNyXmXJBTgHxNlGr3McE8l5CLGpvJmR8rh+zHqHPBQgRq70ADqALzmBQhYCsFRySXnOhTiilqzSk2TxXChFRykUIrxXke2jtQ7VFqPKD2Xs0g+zwP7XAgdTjBydpUcOkd5LlDjlUROKBtmzM+cPRMSCrmrMGticgmB7mJ3Oh5MM3IJDRSyj9ekldEzoyrtFCJOQbWemBYCqIX9phMBlPakAABqL1rlGDWo1XgKMgaogAG0QAAF094lyzhseuTrzmRgjFGEISrzghBbpC6Kgbn6MBjYbSFfqeqGoQMIUVxCYBYijBiuAFCjg8HIGtQIuB4CYGoOW2AI9C172ABarOJaxGYCrjdMtvpTidqLT1fNg7h1yhlnAYcGEzgdRYSNGtLIxoVBwE2-k8gsC-2Nawd6g6NYjWANMMg8h5Q2UXK1Za6giKToun2q1rAbXBshS63o7qNzCVSZ6hA-oox2qrkJJ9F0A3Zs-eGqNZ70D5rjaXKtybQhpvGBm-u2bc1T3QCWiY0VDYWytllTMobB2wZw6AUuiZ8P8RQ0pTdntBDDkYVLCYPbfpnr+r9Le3G-p-VYzdTw87WFgxLTeOCWrCCISoLQT0KZDQgCmAAfQ0TZGI+ZF7vUUyp4h6nFwjHep+UNEboqhpShVZ8BCdQqUJFECoqyQg5VJJq7yMAADSOBMAEJ0zgVTgQwAhEYADYA4srOhBs0acUTmKoudKG5zz3nQi+eU8QoL29gCwaRA7PmOAwBYn+N5PoqRxT937PaIdOIqFANwU4eUZN3ooBLWATA1WcEOErlGFMmDAHtYrjZAA5N5AYCAJgtTwAInAA2jP9y8LUDo3C2s0JgKTVO+QS3hmhlKDSCZ4aoHnCaje1huaom-IJhAJm8jznKvOCTFAogMHnNrNYp2Lwmp69Q2rMATvfhXOdlrS2vv2o5VEJo04iCCAQJYPAAOsE1Y6+2OHfX5D8Szl4NwR4MZBDwBp3paZsy-bPHWG7dYJDsC4HoFQRAbJk6yEofQIghyPdJ5obQvl6dU5p6z+A7PKcGCZ69hAEhlu8+UAYLnUgvui4Z0QIcwJGYcssCQRA-wupDqrFXKIURWqa+kV4aReBoByHIEqWw-gGQkD5pXGI-ZnFKiHUVLEEcEDlGGArVHABJRokJS0Si9hwMARAh2CDIJYaRIxjwcD14gRUXUEBUkt4gCOMfYDxCaxDCkPjopwNjO6OGqRkyC8OzsH7Z2rpS0u4LknwY7sXEF891AguDtvo+-DiupffvBnO3fMWTfO9d-L7s1rSPlt94vD4YHDsZS1F1xXfMrgh08ECIvbVkONjlv7mDzqkPYheBbEqfiY+MxV+Z8GWnHAOfi6F-hOnfPGc2yL9znQl+RAS60Dz3QYv7+n+v5Ljr0vOdf8RdP8Zc5dd4gA

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[fblettner]

Hello,
I don't know exactly for svelte but for React, to solve this, i have added a feature for global filter. It is a workaround but with this i was able to solve Typescript error and runtime error

import { ITableRow, TablesGridHardCoded } from '@ly_types/lyTables';
import {
    functionalUpdate,
    InitialTableState,
    makeStateUpdater,
    OnChangeFn,
    RowData,
    Table,
    Updater,
} from '@tanstack/react-table';

// Define the custom feature's state
export interface GlobalFilterState {
    globalFilter: string
}

// Define the custom feature's options
export interface GlobalFilterOptions {
    onGlobalFilterChange?: OnChangeFn<GlobalFilterState['globalFilter']>;

}

// Define the custom feature's instance methods
export interface GlobalFilterInstance {   
    clearGlobalFilter: () => void
    applyGlobalFilter: (filter: string, rows: ITableRow[]) => ITableRow[]
}

// Use declaration merging to extend TanStack Table's types
declare module '@tanstack/react-table' {
    interface TableState extends GlobalFilterState { }
    interface TableOptionsResolved<TData extends RowData>
        extends GlobalFilterOptions { }
    interface Table<TData extends RowData> extends GlobalFilterInstance { }
}

// Define the feature
export const GlobalFilterFeature = {
    getInitialState: (initialState?: InitialTableState): GlobalFilterState => ({
        globalFilter: '',
        ...initialState,
    }),

    getDefaultOptions: <TData extends ITableRow>(
        table: Table<TData>
    ): GlobalFilterOptions => ({
        onGlobalFilterChange: makeStateUpdater('globalFilter', table),
    }),

    createTable: <TData extends ITableRow>(table: Table<TData>) => {
        // Set the global filter
        table.setGlobalFilter = (updater: Updater<string>) => {
            const safeUpdater = functionalUpdate(updater, table.getState().globalFilter);
            table.options.onGlobalFilterChange?.(safeUpdater);
        };

        // Clear the global filter
        table.clearGlobalFilter = () => {
            table.setGlobalFilter(''); // Reset filter to empty string
        };

        // Method to filter rows based on the current global filter value
        table.applyGlobalFilter = (filter: string, rows: ITableRow[]) => {
            if (!filter) return rows; // Return all rows if no filter value

            return rows.filter((row: RowData) => {
                return Object.keys(row as ITableRow).some((columnId) => {
                    if (columnId === TablesGridHardCoded.row_id) return false; 

                    const value = (row as ITableRow)[columnId];
                    const safeValue = (() => {
                        if (value === null || value === undefined) {
                            return ''; // Treat null/undefined as empty strings
                        }
                        if (typeof value === 'number') {
                            return String(value); // Convert numbers to strings
                        }
                        if (typeof value === 'boolean') {
                            return value ? 'true' : 'false'; // Convert boolean to 'true'/'false'
                        }
                        return String(value); // Convert other types to strings
                    })();
                    return safeValue.toLowerCase().includes(filter.toLowerCase());
                });
            });
        };

    },
};

And declare this feature when creating the table

    const table = useReactTable({
        _features: [DensityFeature, RowSelectionFeature, TableEditFeature, ClipboardFeature, GlobalFilterFeature],
        data: tableState.filteredRows,
        columns: tableState.tableData.columns,
        getFilteredRowModel: getFilteredRowModel(),
        state: {
            sorting: tableState.sorting,
            density: tableState.density,
            columnVisibility: tableState.tableData.columnsVisibility,
            rowSelection: tableState.selectedRowModel,
            tableEdit: tableState.tableEdit,
            clipboard: tableState.clipboard,
            globalFilter: tableState.globalFilter,
            columnFilters
        },
        onGlobalFilterChange: (updaterOrValue) => {
            setTableState((prevState) => {
                const newGlobalFilter = typeof updaterOrValue === 'function'
                    ? updaterOrValue(prevState.globalFilter)
                    : updaterOrValue;

                const filteredRows = table.applyGlobalFilter(newGlobalFilter, tableState.tableData.rows);
                return {
                    ...prevState,
                    globalFilter: newGlobalFilter,  // Update global filter
                    filteredRows,  // Update the filtered rows based on the new global filter
                };
            });
        },        
...