npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@inventi/mailstep-common-grid

v1.2.4

Published

[![ReactJs][react-image]][react-url] [![TypeScript][typescript-image]][typescript-url] [![Redux][redux-image]][redux-url] [![Storybook][storybook-image]][storybook-url] [![Download Count][download-image]][download-url] [![GitHub license][license-image]][l

Downloads

14

Readme

Inventi Common Grid

ReactJs TypeScript Redux Storybook Download Count GitHub license

Robust, complex and sophisticated component for datagrid rendering.

  • server side and client side sorting
  • server side and client side filtering
  • moving columns via drag and drop
  • column grouping
  • easy to be styled
  • redux support for external control
  • high level of customization

Installation

yarn add @inventi/mailstep-common-grid

Usage

const columnDefinitions = [
     { name: 'username', title: 'User name', flexBasis: 160 },
     { name: 'age', title: 'Age', flexBasis: 160, filteringType: 'number', },
     { name: 'isAdmin', title: 'Admin', flexBasis: 160, filteringType: 'flag', },
]

const data = [
    { id: 1, username: 'John deen', age: 27, isAdmin: true },
    { id: 2, username: 'Emily Watson', age: 22, isAdmin: false },
]

const gridActions = {
  setPage: (number) => console.log('setPage', number),
  setRowsPerPage: (number) => console.log('setRowsPerPage', number),
  addFilter: (column, value, filterProps) => console.log('add filter for column', column ),
}

const gridSelectors = {
    page: 1,
    rowsPerPage: 10
}

const MyPage = () =>
    <CommonGrid
        columnsDefinitions={columnDefinitions}
        rowsData={data}
        gridActions={gridDummyActions}
        gridSelectors={gridSelectors}
    />

Props

actionColumnDefinition: ActionColumn

Used to define the first column of the grid. This column usually contains buttons for displaying detail or editing data in a row and other features.

ActionColumn:

Object with keys: | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | actionOptions | Array<BatchAction> | no | handlers for batch action on grid | [] |
| canRowEdit | boolean | no | shows / hides the edit button | false |
| canRowRead | boolean | no | shows / hides the read button | false |
| createLink | (params) => string | no | callback for above buttons | - |
| forceCheckboxes | boolean | no | displays checkboxes in each row | false |

BatchAction

Object with keys: | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | value | string | yes | | - |
| label | string | yes | | - |
| isEnabled | (checkedRows) => boolean | no | | - |

allowRowSelect: boolean, default: false

Enable select a row by clicking.

className: string, default: ''

Main className over the entire grid.

columnLayout: 'normal' | 'no-scroll', default: normal

TODO

components: Components

Used to define custom components in the grid. Object with keys: | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | Translator | React.ComponentType | no | see TranslatorPublicInterfaceProps | - |
| Checkbox | React.ComponentType | no | see CheckboxPublicInterfaceProps | - |
| Button | React.ComponentType | no | see ButtonPublicInterfaceProps | - | | Switch | React.ComponentType | no | see SwitchPublicInterfaceProps | - | | Paginator | React.ComponentType | no | see PaginatorProps | - | | ColumnTitle | React.ComponentType | no | see ColumnTitleProps | - |

TranslatorPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | id | string | no | | - |
| defaults | string | no | | - |

CheckboxPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | name | string | no | | - |
| label | string, JSX.Element | no | | - | | onChange | (event) => void | no | | - | | checked | boolean | no | | - |

ButtonPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | children | React.ReactNode | no | | - |
| type | button, submit, reset | no | | - | | appearance | string | no | | - | | isLoading | boolean | no | | - | | disabled | boolean | no | | - | | margin | string | no | | - | | className | string | no | | - | | onClick | (event) => void | no | | - |

SwitchPublicInterfaceProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | name | string | no | | - |
| label | string | no | | - | | onChange | (event) => void | no | | - | | checked | boolean | no | | - |

PaginatorProps

Its a component with props | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | page | number | yes | | - |
| itemCount | number | yes | | - | | itemPerPage | number | yes | | - | | onPageChange | (number) => void | no | | - |

ColumnTitleProps

Custom component to replace column title and sorting indicator | Name | Type | Required | Description | Default | | ------------------- | ------------------------------- | :--------: | :------------------------------------ | :-------- | | title | string \| JSX.Element | no | title of the column | - |
| isSortable | boolean | yes | can column be sorted | - | | sortValue | asc \| desc \| null | yes | current applied sort on this column | - | | onSetSort | (sortValue) => void | no | set new sort value for column | - |

columnsDefinitions: Array

Defines the properties of each grid column.

ColumnDefinition type

Object with keys: | Name | Type | Required | Description | Default | | ----------------------| ---------------------------------- | :--------: | :------------------------------------ | :-------- | | name | string | yes | | - |
| group | string | no | Divides columns into the same groups. | - | | systemName | string | no | | - | | systemFilter | string | no | | - | | title | string | no | | - | | filtering | boolean | no | | - | | filteringType | number, text, date, flag | no | | - | | filterExtraProps | FilterExtraProps | no | | - | | getFilterCriteria | (value: string) => {[column]: any}| no | | - | | filterOptions | Array<Option> | no | | - | | sorting | boolean | no | | - | | formatRowValue | (row) => React.node | no | | - | | cellComponent | React.ComponentType | no | see DataCellProps | - | | flexGrow | number | no | | - | | flexShrink | number | no | | - | | fixedSize | boolean | no | | - | | alwaysOn | boolean | no | | - | | defaultHidden | boolean | no | | - |

FilterExtraProps

Object with keys: | Name | Type | Required | Description | Default | | ------------------- | -------------- | :--------: | :------------------------------------ | :-------- | | isMulti | boolean | no | | - |
| comparators | any | no | | - |
| filterTime | boolean | no | | - | | decimals | number | no | | - | | isFloat | boolean | no | | - |

DataCellProps

| Name | Type | Required | Description | Default | | ------------------- | --------------------------------------------- | :--------: | :------------------------------------ | :-------- | | rowData | T | no | | - |
| onRowAction | (id, field, value) => void | Promise<any> | no | | - |
| column | ColumnDefinition | no | | - |

errorMessage: string

If an error occurs somewhere on the page, typically while loading data into the grid, we can display it in the grid where the rows are rendered.

extraControlButtons: Array

Buttons for other user actions can be displayed around the grid.

ExtraControlButton

Object with keys: | Name | Type | Required | Description | Default | | --------------- | ------------------------------------------------- | :--------: | :------------------------------------ | :-------- | | node | React.ReactNode | no | | - |
| onClick | () => void | no | | - |
| onSelect | (value: string) => void | no | | - | | label | React.node | no | | - | | style | primary, secondary | no | | - | | options | Array<Option> | no | | - | | position | top-left, top-right, bottom-left, bottom-right | no | | - | | hide | boolean | no | | - | | hideChevron | boolean | no | | - | | disabled | boolean | no | | - |

filters: FiltersConfig

gridActions: GridActionsType

gridSelectors: GridSelectorsType

hideAllControls: boolean, default: false

If set, only grid and paginator will be rendered. No other control above and below grid will be rended. Use if you want to handle grid configuration in custom way

hideColumnConfig: boolean, default: false

isLoading: boolean, default: isLoading

minColumnWidth: number, default: 30

onBatchAction: (action: batchAction, affectedRows: T[]) => void

onRowAction: (id: string, field: string, value: any) => void

onRowEditClick: (id: string, props: TData) => void

onRowReadClick: (id: string, props: TData) => void

onRowClick: (id: string, props: TData) => void

rowsData: RowProps[]

totalRowsCount: number, default: 0

Contributors

License

MIT