@synerise/ds-column-manager v0.11.51
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
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' |
7 days ago
9 days ago
9 days ago
18 days ago
21 days ago
21 days ago
22 days ago
25 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
7 months ago
7 months ago
6 months ago
6 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago