How Sorting and Filtering Both?

[Fiso-Maker]

How?

import { Button, Stack } from '@mui/material';
import * as React from 'react';
import DataGrid, { SortColumn } from 'react-data-grid';
import { HeaderRendererProps, useFocusRef } from 'react-data-grid';
import { useTranslation } from 'react-i18next';

const filterColumnClassName = 'filter-cell';

interface Filter extends Omit<any, any> {
    complete: number | undefined;
    enabled: boolean;
}
const FilterContext = React.createContext<Filter | undefined>(undefined);
export default function DataTable({
    rows,
    columns,
    opt = undefined,
    modalOpen = undefined,
    InsertModalOpen = undefined,
    pageSize = 100,
    rowsPerPageOptions = [5],
    height = 340,
    insertable = true,
    direction,
}: any) {
    const { t } = useTranslation();
    const [isInsertable, setIsInsertable] = React.useState<boolean>(insertable);
    const [filters, setFilters] = React.useState<any>({
        enabled: true,
    });

    // @ts-ignore
    let columnList: any[] = columns.map((obj: any) => {
        return { column: obj.key, formatter: obj.formatter };
    });

    const convertColumn = React.useMemo(() => {
        return columns.map((column: any) => {
            let key = column.key;
            column.name = t(column.name);

            column['headerCellClass'] = filterColumnClassName;

            if (column['selectOpts']) {
                let selectOpts = column['selectOpts'];
                let opts = selectOpts.map((k: any) => {
                    return <option value={k.value}>{k.text}</option>;
                });

                column['headerRenderer'] = (p: any) => (
                    <FilterRenderer<any, unknown, HTMLInputElement> {...p}>
                        {({ filters, ...rest }) => (
                            <select
                                onChange={e => {
                                    let temp: any = { ...filters };
                                    // @ts-ignore
                                    temp[key] = e.target.value;

                                    setFilters(temp);
                                }}
                                className="grid-herder-select"
                            >
                                (${opts})
                            </select>
                        )}
                    </FilterRenderer>
                );
            } else if (!column['selectOpts']) {
                column['headerRenderer'] = (p: any) => (
                    <FilterRenderer<any, unknown, HTMLInputElement> {...p}>
                        {({ filters, ...rest }) => (
                            <input
                                {...rest}
                                // className={column["headerCellClass"]}
                                style={{ inlineSize: '100%', padding: '4px', fontSize: '14px' }}
                                // @ts-ignore
                                value={filters[column.name]}
                                onChange={e => {
                                    let temp: any = { ...filters };
                                    // @ts-ignore
                                    temp[key] = e.target.value;

                                    setFilters(temp);
                                }}
                            />
                        )}
                    </FilterRenderer>
                );
            }

            return column;
        });
    }, []);

    const filterCondition = (r: any) => {
        let check = true;

        for (let obj of columnList) {
            let column = obj.column;
            if (filters[column] === undefined || filters[column] === '') {
                check = true;
            } else if (filters[column].toString() === r[column].toString()) {
                check = true;
            } else if (r[column].toString().includes(filters[column].toString())) {
                check = true;
            } else if (obj.formatter !== undefined && typeof obj.formatter === 'function') {
                let row = {};
                // @ts-ignore
                row[column] = r[column];
                let formatText = obj.formatter({ row }).toString();
                let text = filters[column].toString();
                if (formatText.includes(text)) {
                    check = true;
                    break;
                } else {
                    check = false;
                    break;
                }
            } else {
                check = false;
                break;
            }
        }

        return check;
    };

    const filteredRows = React.useMemo(() => {
        return rows.filter((r: any) => {
            return filterCondition(r);
        });
    }, [rows, filters]);

    const [sortColumns, setSortColumns] = React.useState<readonly SortColumn[]>([]);
    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
        setSortColumns(sortColumns.slice(-1));
    }, []);

    const sortedRows = React.useMemo((): any => {
        if (sortColumns.length === 0) return filteredRows;
        const { columnKey, direction } = sortColumns[0];

        let sortedRows: any = [...filteredRows];

        switch (typeof columnKey) {
            case typeof String:
                sortedRows = sortedRows.sort((a: { [x: string]: string }, b: { [x: string]: any }) => a[columnKey].localeCompare(b[columnKey]));
                break;

            default:
                sortedRows = sortedRows.sort((a: { [x: string]: number }, b: { [x: string]: number }) => a[columnKey] - b[columnKey]);
                break;
        }

        return direction === 'DESC' ? sortedRows.reverse() : sortedRows;
    }, [filteredRows, sortColumns]);

    return (
        <FilterContext.Provider value={filters}>
            <div>
                <div style={{ height: height, width: '100%', textAlign: 'left', display: 'flex', flexDirection: 'column', blockSize: '100%', gap: '10px' }}>
                    <DataGrid
                        // className={filters.enabled ? filterColumnClassName : undefined}
                        headerRowHeight={filters.enabled ? 70 : undefined}
                        columns={columns}
                        rows={sortedRows}
                        sortColumns={sortColumns}
                        onSortColumnsChange={onSortColumnsChange}
                        direction={direction}
                        onRowDoubleClick={(row: any) => {
                            if (opt) {
                                opt.setRowData({ ...row });
                            }

                            if (modalOpen) {
                                modalOpen(true);
                            }
                        }}
                    ></DataGrid>
                </div>
                {isInsertable && (
                    <Stack spacing={2} direction="row" justifyContent="flex-end" sx={{ pt: 2 }}>
                        <Button
                            variant="outlined"
                            color="success"
                            onClick={() => {
                                if (opt) {
                                    opt.setRowData({ ...rows[0] });
                                }

                                if (InsertModalOpen) {
                                    InsertModalOpen(true);
                                }
                            }}
                        >
                            INSERT
                        </Button>
                    </Stack>
                )}
            </div>{' '}
        </FilterContext.Provider>
    );
}

function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
    isCellSelected,
    column,
    onAllRowsSelectionChange,
    allRowsSelected,
    onSort,
    children,
}: HeaderRendererProps<R, SR> & {
    children: (args: { ref: React.RefObject<T>; tabIndex: number; filters: Filter }) => React.ReactElement;
}) {
    const filters = React.useContext(FilterContext)!;
    const { ref, tabIndex } = useFocusRef<T>(isCellSelected);

    return (
        <div>
            {<div>{column.name}</div>}

            {filters.enabled && <div>{children({ ref, tabIndex, filters })}</div>}
        </div>
    );
}

[rohit-squirrel]

Sort and Filter are not working simultaneously ? Only one is working at a time. @amanmahajan7

[Fiso-Maker]

filter only work. if I remove the filter, I can use sorting, but I want to use both.