Collection Component

Beta

0.1.1

<ecc-utils-design-collection/>

EccUtilsDesignCollection

Overview

The Collection component is used to render a collection of items with built-in filtering and pagination capabilities. It's ideal for displaying lists of items that require user interaction, such as expandable details, filtering, and page navigation.

Preview

Examples

Basic Usage

EccUtilsDesignCollectionExample.tsx

import React from 'react';
import EccUtilsDesignCollection from '@elixir-cloud/design/dist/react/collection';
 
export default function CodeEditor() {
  return <EccUtilsDesignCollection
    items={[...]}
  />;
}

Properties

Property	Required	Default	Type	Description
`items`	true		`items`	An array of items to render
`filters`	false	`[]`	`filters`	An array of filters to render
`totalItems`	false	`-1`	`Number`	The total number of items in the collection. If not provided, the collection will render pagination without fixed page numbers.
`pageSize`	false	`5`	`Number`	The number of items per page

items

Each item in the items array should have the following structure:

Property	Required	Type	Description
`index`	Yes	`Number`	The index of the item
`name`	Yes	`String`	The name or title of the item
`key`	Yes	`String`	A unique identifier for the item
`lazy`	No	`Boolean`	Whether the item's content should be lazy-loaded
`tag`	No	`tag`	An object containing tag information for the item

tag

The tag object, if present, should have the following structure:

Property	Type	Description
`name`	`String`	The text to display in the tag
`type`	`String`	The type of tag (e.g., 'primary', 'success', 'danger')

filters

Each filter in the filters array should have the following structure:

Property	Required	Type	Description
`key`	Yes	`String`	A unique identifier for the filter
`type`	Yes	`'search' \| 'select'`	The type of filter to render
`options`	No	`Array<String>`	Options for select-type filters
`selectConfig`	No	`selectConfig`	Configuration for select-type filters
`placeholder`	No	`String`	Placeholder text for the filter input

selectConfig

The selectConfig object, if present, can have the following property:

Property	Type	Default	Description
`multiple`	`Boolean`	`false`	Whether multiple options can be selected

totalItems

The totalItems property specifies the total number of items in the collection. If not provided, the collection will render pagination without fixed page numbers. This property is useful when the total number of items is known and fixed.

pageSize

The pageSize property specifies the number of items to display per page. The default value is 5.

Code Details