@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
31 lines • 1.8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
function MultiSelectColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id }, }) {
// Calculate the options for filtering
// using the preFilteredRows
const options = react_1.default.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
// Render a multi-select box
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("option", Object.assign({ value: "" }, { children: "All" })), options.map((option) => ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: option === null || option === void 0 ? void 0 : option.toString() }, { children: option }))))] })) }));
}
exports.default = MultiSelectColumnFilter;
//# sourceMappingURL=MultipleSelectCo.js.map