1.0.23 • Published 3 years ago

@penta-b/grid v1.0.23

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

GRID Plugin

A reusable component that uses react-table library.

Version 1.0.18 changes list

  1. 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

  1. Basic View : Basic view display only columns with "display = basic"

  2. 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:

  1. 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
  2. selection: array of the "rowIdentifier" for the selected rows (in case of selection)
  3. 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
              }
           ]
        }
1.0.23

3 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

0.1.0

6 years ago