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

    0.10.24 • 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'

    Keywords

    none

    Install

    npm i @synerise/ds-column-manager

    DownloadsWeekly Downloads

    553

    Version

    0.10.24

    License

    ISC

    Unpacked Size

    146 kB

    Total Files

    51

    Last publish

    Collaborators

    • synerise