@synerise/ds-column-manager
TypeScript icon, indicating that this package has built-in type declarations

0.11.35 • Public • Published

id: column-manager title: ColumnManager

ColumnManager UI Component

Installation

npm i @synerise/ds-column-manager
or
yarn add @synerise/ds-column-manager

Usage

import ColumnManager from '@synerise/ds-column-manager'

<ColumnManager />

Demo

<iframe src="/storybook-static/iframe.html?id=components-column-manager--default"></iframe>

API

ColumnManager

Property Description Type Default
hide Specify a callback that will be called when a user clicks mask, close or cancel button. Function -
visible Whether the ColumnManager is visible or not. boolean false
onSave Specify a callback that will be called when a user saves new view (savedView: SavedView) => void; -
onApply Specify a callback that will be called when a user clicks on Apply button (columns: Column[], groupSettings: GroupSettings) => void -
columns Current columns configuration Column[] []
texts Object contains texts for buttons, title, confirms etc. Texts -
itemFilterConfig ItemFilter config ItemFilter -
savedViewsVisible Whether the ItemFilter with saved views is visible boolean -
hideSavedViews Hide ItemFilter with saved views ItemFilter -
groupSettings Configuration of grouped data GroupSettings or undefined undefined

Column

Property Description Type Default
id Id of column string -
key Key of data from dataSource React.ReactText -
name Name of column string -
visible Whether the column is visibile in table view boolean -
type Type of data in column 'text', 'number', 'date', 'boolean', 'list' -
fixed Whether the column has fixed position or not in table view 'left' , 'right', undefined -
group Whether the column has been grouped boolean -

SavedView

Property Description Type Default
meta Name and description of saved view {name: string; description: string} {}
groupSettings Configuration of grouped data GroupSettings undefined
columns Current columns configuration Column[] []

GroupSettings

Property Description Type Default
column Column data Column -
settings Grouping configuration Settings -

Settings

Property Description Type Default
type Type of grouping 'value', 'ranges', 'interval', 'disabled', undefined -
ranges Array of ranges if grouping by ranges is selected Range[] false
interval Number of items in single group if grouping by interval is selected number,false false

Range

Property Description Type Default
from Lower boundary of range {value: React.ReactText, error: string } -
to Upper boundary of range {value: React.ReactText, error: string } -

Texts

Property Description Type Default
title Manage columns title string / React.ReactNode 'Manage columns'
searchPlaceholder Search input placeholder string 'Search'
searchClearTooltip Clear label string / React.ReactNode 'Clear'
noResults No search results placeholder string / React.ReactNode 'No results'
searchResults Search results title string / React.ReactNode 'Search results'
visible Visible group label string / React.ReactNode 'Visible'
hidden Hidden group label string / React.ReactNode 'Hidden'
saveView Save button label string / React.ReactNode 'Save view'
cancel Cancel button label string / React.ReactNode 'Cancel'
apply Apply button label string / React.ReactNode 'Apply'
fixedLeft Fixed left label string / React.ReactNode 'Fixed left'
fixedRight Fixed right label string / React.ReactNode 'Fixed right'
group Group label string / React.ReactNode 'Group'
clear Clear label string / React.ReactNode 'Clear'
viewName Label of new view description input field string / React.ReactNode 'View name'
viewDescription Label of new view name input field string / React.ReactNode 'Description'
viewNamePlaceholder Placeholder of new name input field string 'Name'
viewDescriptionPlaceholder Placeholder of new description input field string 'Description'
mustNotBeEmpty Must not be empty error message string / React.ReactNode 'Must not be empty'
switchOn Switch on tooltip string / React.ReactNode 'Switch on'
switchOff Switch off tooltip string / React.ReactNode 'Switch off'
groupByValue Group by value option string / React.ReactNode 'Group by value'
groupByRanges Group by ranges option string / React.ReactNode 'Group by ranges'
groupByIntervals Group by intervals option string / React.ReactNode 'Group by intervals'
groupDisabled Disable grouping option string / React.ReactNode 'Group disabled'
groupTitle Title of gropu settings modal string / React.ReactNode 'Table content group'
selectPlaceholder Select grouping type placeholder string 'Select'
intervalPlaceholder Set interval input placeholder string 'Set interval'
groupingType Select grouping type label string / React.ReactNode 'Set grouping type'
groupingTypeTooltip Grouping type label tooltip string / React.ReactNode More details about grouping
from Range input label - from string / React.ReactNode 'From'
to Range input label - to string / React.ReactNode 'To'
remove Remove range tooltip string / React.ReactNode 'Remove'
addRange Label of add range button string / React.ReactNode 'Add more'
errorEmptyRange Error message for empty range row string / React.ReactNode 'You should fill one of these fields'
errorEmptyFromField Error message for empty 'From' field string / React.ReactNode 'Only the "From" field in the first range can be left blank'
errorEmptyToField Error message for empty 'To' field string / React.ReactNode 'Only the "To" field in the last range can be left blank'
errorChooseGrouping Error message for non selection type of grouping string / React.ReactNode 'Error - Choose type of grouping'
errorInterval Error message for invalid interval value string / React.ReactNode 'Error - Provide correct interval value'
errorRange Error message for invalid range value string / React.ReactNode 'Error - Provide correct value'

Readme

Keywords

none

Package Sidebar

Install

npm i @synerise/ds-column-manager

Weekly Downloads

28

Version

0.11.35

License

ISC

Unpacked Size

166 kB

Total Files

51

Last publish

Collaborators

  • synerise