
Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
miller-columns-select
Advanced tools
Miller Columns Select is a controlled form component by React.
# Yarn
$ yarn add miller-columns-select
# Npm
$ npm install --save miller-columns-select
import { useState } from 'react';
import type { ID, ItemType } from 'miller-columns-select';
import MillerColumnsSelect from 'miller-columns-select';
enum TypeEnum {
folder = 'folder'
file = 'file'
}
const items: ItemType<{ type: TypeEnum}>[] = [
[
{
parentId: null,
id: '1',
title: '1',
type: TypeEnum.folder,
},
{
parentId: '1',
id: '1-1',
title: '1-1',
type: TypeEnum.file,
},
{
parentId: '1',
id: '1-2',
title: '1-2',
type: TypeEnum.file,
},
];
]
export const Example = () => {
const [selectedIds, setSelectedIds] = useState<ID[]>([]);
return (
<MillerColumns
items={items}
getCanExpand={(item) => item.type === TypeEnum.folder}
selectedIds={selectedIds}
onSelectItemIds={(ids) => setSelectedIds(ids)}
/>
);
};
Prop | Type | Default | Description |
---|---|---|---|
items* | McsItem<T>[] | item used to display in columns | |
mode | single or multiple | multiple | Single select or multiple select |
getCanExpand | (id: McsID) => boolean | distinguish whether item can be expanded | |
getHasMore | (id: McsID|null) => boolean | () => false | determine whether the column has more data |
getHasError | (id: McsID|null) => boolean | () => false | determine whether the column show list or retry button |
onExpand | (id:McsID) => void | when item expand will call | |
onScroll | (id: McsID | null) => void | when column scroll will call | |
onRetry | (id: McsID | null) => void | when the retry button is clicked will call | |
columnCount | number | 3 | columns to display in a container |
columnHeight | number | columns height (control scrolling) | |
showSelectAll | boolean | false | show select all button |
renderTitle | (column: McsColumn) => React.ReactNode | display column title | |
renderEnd | (column: McsColumn) => React.ReactNode | display column end | |
renderLoading | (column: McsColumn) => React.ReactNode | display column loading | |
renderError | (column: McsColumn) => React.ReactNode | display column retry | |
renderHeader | (columns: McsColumn[]) => React.ReactNode | display container header | |
renderFooter | (columns: McsColumn[]) => React.ReactNode | display container footer | |
disabledIds | McsID[] | disabled ids | |
selectedIds | McsID[] | [] | selected ids |
onSelectItemIds | (selectedIds: McsID[]) => void | set selected ids | |
expandedIds | McsID[] | expanded ids | |
onChangeExpandedIds | (expandedIds: McsID[]) => void | expanded ids |
$ yarn
$ yarn start
FAQs
Miller Columns Select for React
The npm package miller-columns-select receives a total of 86 weekly downloads. As such, miller-columns-select popularity was classified as not popular.
We found that miller-columns-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
Product
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.