import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { Chip } from '../../chip/chip.js';
import { Flex } from '../../flex/flex.js';
import { Text } from '../../text/text.js';

function DisplayProperties({ columns, }) {
    const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
    return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: 3, children: [jsxRuntimeExports.jsx(Text, { children: "Display Properties" }), jsxRuntimeExports.jsx(Flex, { gap: 3, wrap: "wrap", children: hidableColumns.map((column) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
}

export { DisplayProperties };
//# sourceMappingURL=display-properties.js.map
