Custom React Table

A custom react table. (Please don't try to use this, since it is custom for the project!)

columns: columns is an array of JSON objects. Each object in the array specifies the Head and Body type of each column in the table.

Each object is composed of two inner objects and an id field:

id: The id of this column.

head: The head object specifies the type of the column's header and the details associated with the column's body. The head has two properties:

• type: The type is a string that specifies the type of the column's head. The head can be one of these types {'TEXT', 'NUMBER' 'ICON', 'SVG_ICON'}
• info: The info is an object that specifies the details associated with the column's head.

The following are the details associated with each head type:

---

• TEXT:
  • label: This property is used for the header label.
  • textFormat: (Incomplete)
• ICON:
  • label: Currently not being used for anything.
  • iconUrl: The URL to the icon used for image.
  • title: Optional text for image title.
• SVG_ICON:
  • svgIconName: The name of the SVG Icon.

body: The body object specifies the type of the column's body and the details associated with the columns body. The body has two properties:

• type: The type is a string that specifies the type of the column's body. The body can be one of these types {'TEXT', 'NUMBER', 'DATE_TIME', 'LINK', 'ICON_LINK', 'ICON', 'BUTTON', 'SVG_ICON'}, .
• info: The info is an object that specifies the details associated with the column's body.

The following are the details associated with each body type:

---

• TEXT:
  • id: This property is used to pull the value for Text display.
  • textFormat: (Incomplete)
• NUMBER:
  • id: This property is used to pull the value for Number display.
  • numberFormat: (Incomplete)
• DATE_TIME:
  • id: This property is used to pull the value for DateTime display.
  • dateTimeFormat: String passed to moment to format the DateTime field.
• LINK:
  • id: This property is used to pull the value for Link display.
  • link: The href of the link.
  • linkId: The Id to pull the Id/Value appended to the Link to create a complete href.
• ICON_LINK:
  • id: Currently this property is not used for anything.
  • linkId: The Id to pull the Id/Value appended to the Link to create a complete href.
  • iconUrl: The URL to the icon used for image.
  • link: The href of the link.
• ICON:
  • id: Used to pull the value of this field. This property is used to see if there is a value in the field. Nothing is displayed if there is not a value based on this property.
  • linkId: The Id to pull the Id/Value appended to the Link to create a complete href. The value pulled using this property is returned back to the event handler.
  • iconUrl: The URL to the icon used for image.
  • handleClick: Click event handler for the field.
• BUTTON: (Incomplete)
  • id: This property is used to pull the value displayed for the button text. This property is returned back to the event handler.
  • handleClick: Click event handler for the field.
• SVG_ICON:(Incomplete)

The following is an example of a columns array wich is composed of two columns.

columns = [
{
    id: "some-id",
    head: {
        type: "Text",
        info: {
            label: "label",
            textFormat: "format",
        },
    },
    body: 
    {
        type: "Text",
        info: 
        {
            id: "id",
            textFormat: "format",
        },
    },
},
{
    id: "some-id",
    head: {
        type: "Icon",
        info: {
            label: "label",
            iconURL: "url",
            title: "title",
        },
    },
    body: 
    {
        type: "Number",
        info: 
        {
            id: "id",
            numberFormat: "number-format",
        },
    },
},
]

License

Apache 2.0