ColumnManager UI Component


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


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




hideSpecify a callback that will be called when a user clicks mask, close or cancel button.Function-
visibleWhether the ColumnManager is visible or not.booleanfalse
onSaveSpecify a callback that will be called when a user saves new view(savedView: SavedView) => void;-
onApplySpecify a callback that will be called when a user clicks on Apply button(columns: Column[], groupSettings: GroupSettings) => void-
columnsCurrent columns configurationColumn[][]
textsObject contains texts for buttons, title, confirms etc.Texts-
itemFilterConfigItemFilter configItemFilter-
savedViewsVisibleWhether the ItemFilter with saved views is visibleboolean-
hideSavedViewsHide ItemFilter with saved viewsItemFilter-
groupSettingsConfiguration of grouped dataGroupSettings or undefinedundefined


idId of columnstring-
keyKey of data from dataSourceReact.ReactText-
nameName of columnstring-
visibleWhether the column is visibile in table viewboolean-
typeType of data in column'text', 'number', 'date', 'boolean', 'list'-
fixedWhether the column has fixed position or not in table view'left' , 'right', undefined-
groupWhether the column has been groupedboolean-


metaName and description of saved view{name: string; description: string}{}
groupSettingsConfiguration of grouped dataGroupSettingsundefined
columnsCurrent columns configurationColumn[][]


columnColumn dataColumn-
settingsGrouping configurationSettings-


typeType of grouping'value', 'ranges', 'interval', 'disabled', undefined-
rangesArray of ranges if grouping by ranges is selectedRange[]false
intervalNumber of items in single group if grouping by interval is selectednumber,falsefalse


fromLower boundary of range{value: React.ReactText, error: string }-
toUpper boundary of range{value: React.ReactText, error: string }-


titleManage columns titlestring / React.ReactNode'Manage columns'
searchPlaceholderSearch input placeholderstring'Search'
searchClearTooltipClear labelstring / React.ReactNode'Clear'
noResultsNo search results placeholderstring / React.ReactNode'No results'
searchResultsSearch results titlestring / React.ReactNode'Search results'
visibleVisible group labelstring / React.ReactNode'Visible'
hiddenHidden group labelstring / React.ReactNode'Hidden'
saveViewSave button labelstring / React.ReactNode'Save view'
cancelCancel button labelstring / React.ReactNode'Cancel'
applyApply button labelstring / React.ReactNode'Apply'
fixedLeftFixed left labelstring / React.ReactNode'Fixed left'
fixedRightFixed right labelstring / React.ReactNode'Fixed right'
groupGroup labelstring / React.ReactNode'Group'
clearClear labelstring / React.ReactNode'Clear'
viewNameLabel of new view description input fieldstring / React.ReactNode'View name'
viewDescriptionLabel of new view name input fieldstring / React.ReactNode'Description'
viewNamePlaceholderPlaceholder of new name input fieldstring'Name'
viewDescriptionPlaceholderPlaceholder of new description input fieldstring'Description'
mustNotBeEmptyMust not be empty error messagestring / React.ReactNode'Must not be empty'
switchOnSwitch on tooltipstring / React.ReactNode'Switch on'
switchOffSwitch off tooltipstring / React.ReactNode'Switch off'
groupByValueGroup by value optionstring / React.ReactNode'Group by value'
groupByRangesGroup by ranges optionstring / React.ReactNode'Group by ranges'
groupByIntervalsGroup by intervals optionstring / React.ReactNode'Group by intervals'
groupDisabledDisable grouping optionstring / React.ReactNode'Group disabled'
groupTitleTitle of gropu settings modalstring / React.ReactNode'Table content group'
selectPlaceholderSelect grouping type placeholderstring'Select'
intervalPlaceholderSet interval input placeholderstring'Set interval'
groupingTypeSelect grouping type labelstring / React.ReactNode'Set grouping type'
groupingTypeTooltipGrouping type label tooltipstring / React.ReactNodeMore details about grouping
fromRange input label - fromstring / React.ReactNode'From'
toRange input label - tostring / React.ReactNode'To'
removeRemove range tooltipstring / React.ReactNode'Remove'
addRangeLabel of add range buttonstring / React.ReactNode'Add more'
errorEmptyRangeError message for empty range rowstring / React.ReactNode'You should fill one of these fields'
errorEmptyFromFieldError message for empty 'From' fieldstring / React.ReactNode'Only the "From" field in the first range can be left blank'
errorEmptyToFieldError message for empty 'To' fieldstring / React.ReactNode'Only the "To" field in the last range can be left blank'
errorChooseGroupingError message for non selection type of groupingstring / React.ReactNode'Error - Choose type of grouping'
errorIntervalError message for invalid interval valuestring / React.ReactNode'Error - Provide correct interval value'
errorRangeError message for invalid range valuestring / React.ReactNode'Error - Provide correct value'