@maherunlocker/custom-react-table/dist/esm/Table/MultipleSelectCo.js

dynamic table based on react table v7

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function MultiSelectColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id }, }) {
    // Calculate the options for filtering
    // using the preFilteredRows
    const options = React.useMemo(() => {
        const options = new Set();
        preFilteredRows.forEach((row) => {
            options.add(row.values[id]);
        });
        return [...options.values()];
    }, [id, preFilteredRows]);
    // Render a multi-select box
    return (_jsx("div", { children: _jsxs("select", Object.assign({ multiple // this prop for multiselect
            : true, value: filterValue, 
            // an appropriate multiselect handler (use Ctrl key to select multiple)
            onChange: (e) => {
                const allValues = Array.from(e.target.selectedOptions)
                    .map((o) => o.value)
                    .filter(Boolean);
                setFilter(allValues && allValues.length ? [1, 2] : undefined);
            } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" })), options.map((option) => (_jsx("option", Object.assign({ value: option === null || option === void 0 ? void 0 : option.toString() }, { children: option }))))] })) }));
}
//# sourceMappingURL=MultipleSelectCo.js.map