@adaptabletools/adaptable/src/View/Components/Selectors/ColumnSelector.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { Select } from '../../../components/Select';
import { useAdaptable } from '../../AdaptableContext';
export const ColumnSelector = function (props) {
    const { api } = useAdaptable();
    const columns = React.useMemo(() => {
        return api.columnApi.getColumnsWithDataType(props.type);
    }, []);
    const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
    const options = columns
        .map((column) => {
        let label = React.createElement(React.Fragment, null, column.friendlyName ?? column.columnId);
        if (props.renderOption) {
            label = props.renderOption(column);
        }
        return {
            label,
            value: column.columnId,
        };
    })
        .filter((option) => {
        if (props.filterColumn) {
            return props.filterColumn(getColumn(option.value));
        }
        return true;
    });
    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
            props.onChange(colId);
        }, options: options }));
};