How to pass props to Filters in React Table

Question

I have DateRangeColumnFilter component which is global and used in some components around the app.I render it inside columns in React Table:

 {
            Header: timestampText,
            accessor: 'timestamp',
            collapse: true,
            Cell: (props: CellValue) => (
                <div>
                    {format(new Date(props.cell.value), 'yyyy-MM-dd')}
                </div>
            ),
            Filter: DateRangeColumnFilter,
            filter: dateBetweenFilterFunction,
        },

To the above rendering code I want to pass props so it will have specific properties only in this place. I want to pass as props what is below in code. In 1st StyledDatePicker I want to pass maxDate, in 2nd StyledDatePicker I want to pass minDate. And both maxDate and minDate will be used only with this rendered component

export const DateRangeColumnFilter: FC<ColumnProps> = ({
column: { filterValue = [], setFilter, Header },
}) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event: any) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    const { useTranslationFunc } = useTranslationFacade();
    const theme = useTheme();
    const setColor = (
        value: boolean,
        firstColor: PaletteColor,
        secondColor: PaletteColor
    ) => (value ? firstColor : secondColor).toString();

    return (
        <StyledSpan>
            <StyledFilterButton aria-haspopup="true" onClick={handleClick}>
                <DateRangeIcon
                    style={{ fontSize: '20px' }}
                    htmlColor={setColor(
                        filterValue[0] || filterValue[1],
                        theme.palette.red,
                        theme.palette.black
                    )}
                />
            </StyledFilterButton>
            <StyledMenu
                id="customized-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <StyledDescriptionDiv>{Header}</StyledDescriptionDiv>
                <StyledContainerDiv>
                    <LocalizationProvider
                        dateAdapter={AdapterDateFns}
                        locale={getCurrentLocale()}
                    >
                        <Stack spacing={3}>
                            <StyledDatePicker
                                label={useTranslationFunc('Od')}
                                value={filterValue[0] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        newValue ? newValue : null,
                                        old[1],
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                                maxDate={new Date()}
                            />
                            <StyledDatePicker
                                label={useTranslationFunc('Do')}
                                value={filterValue[1] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        old[0],
                                        newValue ? newValue : null,
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                                minDate={filterValue[0]}
                            />
                        </Stack>
                    </LocalizationProvider>
                </StyledContainerDiv>
            </StyledMenu>
        </StyledSpan>
    );
};

Answer 1

One way is to set that filter as an object instead of a string, eg:

const filter = { filterValue: 'whatever', extra1: <anything, object, array, string, function>, extra2: ... }

And then make your own filter function that extracts whatever is needed from that object. Sorry, I don't have a working example yet, but I know React-table can pass an object as filterValue to custom filter functions. This will of course mean that none of the react-table predefined filters will work.