@penta-b/grid v1.0.23
GRID Plugin
A reusable component that uses react-table library.
Version 1.0.18 changes list
- Fix pagination's pageSizeOptions bug (remove default pageSize from options)
Functionality
For information about the available functionality please see react-table
The new functionalities are
1. Custom pagination
2. Date Filter
3. Time Filter
4. Number Filter with comparison operation
5. Dropdown/lookup Filter
6. MultiDropdown Filter
7. The ability to add your own customized components to rows or grid body
8. Multiable views on grid (Basic, More Info View)
9. Visual alert on new row in Real time updates
10. Fire notification incase of empty data Usage
This Package exports the following structure
{
components : {
Grid,
LargeViewButton
}
} import { components } from '@penta-b/grid'
const Grid = components.Grid
<Grid data={data} settings={settings}/>Settings
This Component read its settings as props
Settings schema
{
"definitions": {},
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "http://example.com/root.json",
"type": "object",
"required": [
"columns",
"data"
],
"properties": {
"name": {
"$id": "#/properties/name",
"type": "string",
"default": "",
"examples": [
"معاملات جارية"
]
},
"rowIdentifier": {
"$id": "#/properties/rowIdentifier",
"type": "string",
"examples": [
"id"
]
},
"language": {
"$id": "#/properties/language",
"type": "string",
"default": "en"
},
"selectable": {
"$id": "#/properties/selectable",
"type": "boolean",
"default": false
},
"sortable": {
"$id": "#/properties/sortable",
"type": "boolean",
"default": false
},
"filterable": {
"$id": "#/properties/filterable",
"type": "boolean",
"default": false
},
"resizable": {
"$id": "#/properties/resizable",
"type": "boolean",
"default": false
},
"manual": {
"$id": "#/properties/manual",
"type": "boolean",
"default": false
},
"pageSize": {
"$id": "#/properties/pageSize",
"type": "integer"
},
"pageSizeOptions": {
"$id": "#/properties/pageSizeOptions",
"type": "array",
"items": {
"$id": "#/properties/pageSizeOptions/items",
"type": "integer",
"default": [ 5, 10, 20, 25, 50, 100]
}
},
"minPages": {
"$id": "#/properties/minPages",
"type": "integer"
},
"maxComponent": {
"$id": "#/properties/maxComponent",
"type": "integer"
},
"viewMode": {
"$id": "#/properties/viewMode",
"type": "string",
"default": "basic"
},
"columns": {
"$id": "#/properties/columns",
"type": "array",
"items": {
"$id": "#/properties/columns/items",
"type": "object",
"required": [
"id",
"name"
],
"properties": {
"id": {
"type": "string"
},
"name": {
"type": "string"
},
"type": {
"type": "string",
"default": "ٍstring"
},
"display": {
"type": "string"
},
"class": {
"type": "string",
"default": ""
},
"sortable": {
"type": "boolean"
},
"filterable": {
"type": "boolean"
}
}
}
},
"data": {
"$id": "#/properties/data",
"type": "array",
"items": {
"$id": "#/properties/data/items",
"type": "object"
}
}
}
}Settings object explanation
name: String
Grid title - optional
pageSize: Number
Maximum number of data's rows displayed per single page. default: 6
Represent the initial value only but changing pageSize will be by using the values given in "pageSizeOptions"
pageSizeOptions: Array
Options for pageSize of grid, shown in menu to change current pageSize.
default: will by the multiplier of pageSize, for example if pageSize = 6 then options are 6,12,18,24
showPagination: Boolean
default : true
show/hide the footer of pagination and page size options for grid
in case of "false" it will display full data without paging
rowIdentifier: String
Represent column's id that carry the data'row unique identifier used mainly incase of selections and row highlighting
example for column object
columns : [{
id: "rowId",
name: "ID"
}]in the previous example of columns setting, "rowId" is the rowIdentifier and that column will have primary key of rows (ids)
selectable: Boolean
default: false
Makes the grid rows selectable with checkboxes
sortable: Boolean
default: false
Controls if all columns can be sorted desc/asc onClick on column header.
Apply on all grid columns (grid level) unless column setting override it.
ps: only when "true" then column setting can override it by setting it to false
filterable: Boolean
default: false
Controls if all columns will have filters according to each column's type
Apply on all grid columns (grid level) unless column setting override it
ps: only when "true" then column setting can override it by setting it to false
resizable: Boolean
default: false
Makes the grid columns resizable horizontally
maxPages: Number
default: 1
Maximum number of pages displayed in paging options
paging options will be consisted of that number in addition to the last page number
manual: Boolean
default: false
Determine if grid functionality 'sort, filter, pagination, ...etc' will be performed server-side or client-side
Set "true" to make it work server-side
language: String
default: "en"
language for grid text, numbers and dates
Controls only the grid text(columns and filters) not the data
columns: Array
Array of objects, while each object represents single column settings
Column that will be "rowIdentifier" is a must if grid has "selectable = true"
Each column's setting must has at least "id, name"
Type: NUMBER, INT , FLOAT , LONG, DOUBLE , STRING, TEXT, DATETIME, DATE, TIME, LOOKUP, DROPDOWN, RADIO, MULTIDROPDOWN, CHECKBOXLIST, COMPONENT OR default ("TEXT")
Display: Grid has two modes for view
Basic View : Basic view display only columns with "display = basic"
Enlarged View : More Info view which display all columns
column setting example
{
"id": "process_number", Required ---- column's identifier
"name": "رقم المعاملة", Required ---- column's display name(column header)
"type": "number", default = TEXT
"display": "basic" for basic view otherwise that column will be appear only in enlarged view
"sortable": false, override "sortable = true" in grid setting
"filterable": false override "filterable = true" in grid setting
"class": "" apply class name to add style to column
"format": "DD-MM-YYYY" optional - used only with column of type "dateTime,date,time"
}
ps: "sortable, filterable" options, works only when "sortable, filterable equals true" on grid Settings level then user can override it for that column by setting them to "false"viewMode: String
default: basic
Initial view mode for columns
Controls the initial columns that will be displayed in grid
if it will display columns with display=basic (default case) or all the columns for any other value
It will be helpful if you wish to disregard the display types of columns(basic or not) and display full data
enableLargeView: Boolean
default: false if value "true" then LargeViewButton component will be added to grid to change viewMode from basic to largeView and vise versa.
setLargeView: function
Function passed to grid as props it will fire on change in viewMode of grid to enlarge container width in layout (MnA Layout related) this props is passed to any plugin from layout, and we pass it to the grid
data: Array
Array of objects, while each object represents data's row in the grid.
The keys of each object are the columns' ids
{
"id": 11,
"process_number": 15, ps: column's id="process_number" "value"="15"
"name": "Tanner Linsley",
"date": "2019-06-14 15:09:26.207699",
"state": 1
}trComponents: Array
Used to add external components for rows in grid These component will be added to every row in the grid It will be added to the imported Grid Component directly as props(not passed as setting)
Array of object while each object will has "component, settings"
There must be a column with type "Component" to include these components under
The grid component will pass the following props to each of the trComponents: 1. rowIdentifier: the row unique identifier 2. recordsData: full data in this record/row contained in grid 3. The component setting will be passed to it as props
<Grid trComponents={[
{ component: Zoom, settings: {} },
{ component: Highlight, settings: {} }
]}
/> component: React Component
settings: Object - any values inside, will be passed as props
There is another feature added to this version user can pass components as part of the data to be added to specific row only and won't appear in other rows for example : the column with type "component" will have "id: buttons" then in this data row :
{
buttons: {
components: [{
component: ZoomToFeatureButton, settings: {}
}]
}
}component "ZoomToFeatureButton" will be added to that row only
maxComponent: Number
default : 2
Maximum number of trComponent to be displayed in row
Extra components that exceed the count will be displayed in sub-menu
gridComponents: Object
Array of components that will be added on grid level
It will be added to Grid Component directly as props(not passed inside settings object)
In case of "selectable = true", the components will have only the selected data
In case of "selectable = false", the components will have the whole data in grid
The grid will pass the following props to the component:
- recordsData: all the data inside grid(displayed or not) with id = {columnId}, unless "selectable = true" then it will have the data only for selected rows
- selection: array of the "rowIdentifier" for the selected rows (in case of selection)
- the object setting will be passsed to it as props
<Grid gridComponents={[
{ component: Zoom, settings: {} },
{ component: Highlight, settings: {} }
]}
/> component: React Component
settings: Object - any values inside, will be passed as props
lookups: Object
Required with columns of type "LOOKUP, DROPDOWN, RADIO"
keys represents column's id that has lookup type
Each key's value must be [] array which has the lookup key-value pairs.
{
"state": [ column-id in columns setting, also data-key in data
{
"1": "الفحص المبدئي"
},
{
"2": "الفحص المكتبي"
}
]
}Example For Settings Object:
{
"name": "معاملات جارية",
"rowIdentifier": "id",
"selectable": false,
"sortable": true,
"filterable": true,
"resizable": false,
"manual": false,
"pageSize": 5,
"maxComponent": 3,
"pageSizeOptions": [
5,
10
],
"language": "ar",
"maxPages": 1,
"columns": [
{
"id": "id",
"name": "رقم المعاملة",
"type": "INT",
"sortable": false
},
{
"id": "date",
"name": "التاريخ",
"type": "date",
"format": "DD-MM-YYYY",
"display": "basic"
},
{
"id": "time",
"name": "الوقت",
"type": "time"
},
{
"id": "name",
"name": "اسم الموظف",
"type": "string",
"display": "basic"
},
{
"id": "state",
"name": "حالة الطلب",
"type": "lookup",
"display": "basic"
},
{
"id": "features",
"name": "الاجراء",
"type": "component",
"sortable": false,
"filterable": false,
"display": "basic"
}
],
"lookups": {
"state": [
{
"1": "الفحص المبدئي"
},
{
"2": "الفحص المكتبي"
}
]
},
"data": [
{
"id": 11,
"number": 15,
"name": "Colorado",
"time": "12:30:20 PM",
"state": 1
},
{
"id": 12,
"number": 17,
"name": "Kansas",
"date": "2020-05-27 15:09:26.207699",
"time": "1:30:20 AM",
"state": 2
}
]
}3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago