@vlsergey/react-bootstrap-pagetable/lib/esm/controlled/visibleFields/FieldsListControl.js

Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.

import { __read, __spreadArray } from "tslib";
import React, { useCallback } from 'react';
import Form from 'react-bootstrap/Form';
function FieldsListControl(_a) {
    var onSelectedChange = _a.onSelectedChange, options = _a.options, placeholder = _a.placeholder, selected = _a.selected;
    var handleSelectChange = useCallback(function (_a) {
        var currentTarget = _a.currentTarget;
        return onSelectedChange(__spreadArray([], __read(currentTarget.options)).filter(function (_a) {
            var selected = _a.selected;
            return selected;
        }).map(function (_a) {
            var value = _a.value;
            return value;
        }));
    }, [onSelectedChange]);
    return React.createElement(Form.Control, { as: "select", htmlSize: 10, multiple: true, onChange: handleSelectChange, style: { height: options.length === 0 ? '15em' : undefined }, value: selected },
        options.length === 0 && React.createElement("option", { disabled: true, key: "", style: { whiteSpace: 'break-spaces' }, value: "" }, placeholder),
        options.map(function (field) {
            return React.createElement("option", { key: field.key, value: field.key }, field.title);
        }));
}
export default React.memo(FieldsListControl);