You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

miller-columns-select

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

miller-columns-select

Miller Columns Select for React

1.4.1
latest
npmnpm
Version published
Weekly downloads
103
-25.36%
Maintainers
1
Weekly downloads
 
Created
Source

Miller Columns Select

Miller Columns Select is a controlled form component by React.

Features

  • A flat data structure makes usage simple.
  • Support for loading data asynchronously.
  • Implement scrolling loading data on a column by react-infinite-scroll-component.
  • The complete example helps you easily implement a demo.
  • Good TypeScript support.

Installation

# Yarn
$ yarn add miller-columns-select

# Npm
$ npm install --save miller-columns-select

Screenshots

Basic Component

Async Component

Usage

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)}
    />
  );
};

Props

PropTypeDefaultDescription
items*McsItem<T>[]item used to display in columns
modesingle or multiplemultipleSingle select or multiple select
getCanExpand(id: McsID) => booleandistinguish whether item can be expanded
getHasMore(id: McsID|null) => boolean() => falsedetermine whether the column has more data
getHasError(id: McsID|null) => boolean() => falsedetermine whether the column show list or retry button
onExpand(id:McsID) => voidwhen item expand will call
onScroll(id: McsID | null) => voidwhen column scroll will call
onRetry(id: McsID | null) => voidwhen the retry button is clicked will call
columnCountnumber3columns to display in a container
columnHeightnumbercolumns height (control scrolling)
showSelectAllbooleanfalseshow select all button
renderTitle(column: McsColumn) => React.ReactNodedisplay column title
renderEnd(column: McsColumn) => React.ReactNodedisplay column end
renderLoading(column: McsColumn) => React.ReactNodedisplay column loading
renderError(column: McsColumn) => React.ReactNodedisplay column retry
renderHeader(columns: McsColumn[]) => React.ReactNodedisplay container header
renderFooter(columns: McsColumn[]) => React.ReactNodedisplay container footer
disabledIdsMcsID[]disabled ids
selectedIdsMcsID[][]selected ids
onSelectItemIds(selectedIds: McsID[]) => voidset selected ids
expandedIdsMcsID[]expanded ids
onChangeExpandedIds(expandedIds: McsID[]) => voidexpanded ids

Start Example(Development)

$ yarn
$ yarn start

License

MIT

Keywords

miller-columns-select

FAQs

Package last updated on 07 Apr 2024

Did you know?

Socket

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.

Install

Related posts