DEV Community

Naeema Bargir
Naeema Bargir

Posted on

facing issue in react-table

I am facing issue in date range filter in react-table library. I am sharing my code. If you find any mistake or one can know any solution please help me out!
Thank You!

`export function DateRangeColumnFilter({

column: { filterValue = [], preFilteredRows, setFilter, id },

}) {

const [min, max] = React.useMemo(() => {
    let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
    let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;

    console.log(min, max)

    preFilteredRows.forEach((row) => {
       let mina = Math.min(new Date(row.values[id]).getTime(), min);
       let maxa= Math.max(new Date(row.values[id]).getTime(), max);

       min = new Date(mina)
       max = new Date(maxa)
    });
    return [min, max];

}, [id, preFilteredRows]);

console.log( min, max , preFilteredRows , filterValue)

//FilterButton
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
};
const handleClose = () => {
    setAnchorEl(null);
};
return (
    <>
        <IconButton
            aria-label="more"
            id="long-button"
            aria-controls={open ? 'long-menu' : undefined}
            aria-expanded={open ? 'true' : undefined}
            aria-haspopup="true"
            onClick={handleClick}
        > <MoreVertIcon /></IconButton>
        <Menu
            className='p-4'
            id="long-menu"
            MenuListProps={{ 'aria-labelledby': 'long-button', }}
            anchorEl={anchorEl}
            open={open} onClose={handleClose}
            value={filterValue}
        >
            <span className='p-2 d-flex' >
                <input
                    value={filterValue[0] || ''}
                    type="date"
                    onChange={e => {
                        const val = e.target.value
                        setFilter((old = []) => [val || undefined, old[1]]);
                    }}
                    placeholder={`Min (${min})`}
                    style={{ marginLeft: '0.5rem' }}
                    className="form-control"
                />
                -
                <input
                    value={filterValue[1] || ''}
                    type="date"
                    onChange={e => {
                        const val = e.target.value
                        setFilter((old = []) => [old[0], val || undefined]);
                    }}
                    placeholder={`Max (${max})`}
                    style={{ marginLeft: '0.5rem' }}
                    className="form-control"
                />
            </span>
        </Menu>
    </>
)
Enter fullscreen mode Exit fullscreen mode

}`

Top comments (0)