UI Components

UI Components

Data tables are used to organize data with a logical relationship in grids.

5.1.1 Guideline

Certain guideline must be taken care while adopting Table component which are listed as below.

  • Table will always be in panel. Panel containing table will have three major sections, panel heading, pagination section and table section. Design specification for the panel heading will remain same as described in panel component section. While pagination section will have 45PX height & content inside will aligned to panel heading title.
  • Table will have two major section, table head & grid for records. Height for the table head will be 45PX while height for the each row will be 30PX, it will also have 1PX divider with color Gray(#d8d8d8)  . Background for the record grid section will be White(#ffffff)   .
Parameter of Table
Fig 5.1.1a Parameter of Table
  • On the panel heading in right side, Grid specific icons based action can be placed, like filter, sorting etc while on the right side of pagination sections, Application specific icons buttons can come like multi-sorting enable/disable, print etc, example of the same as shown in the image below.
  • Special guideline icon place holder size for the actions on right side of pagination will be 30PX.
  • Records will have font size 12PX and color DarkGray(#5c5c5c)   while column heading will have font size 13PX and color White(#ffffff)  . Column heading & records in each cell will be left aligned and placed 10PX margin of the left divider.
  • For a column specific actions user can click on the arrow below heading of each color with background color NavyBlue(#120e5b)  , height will be 10PX and it will have the same width as column, it will have dropdown menu.
  • Special guideline for the column heading where we will have checkbox to select records and its range. In heading checkbox while on active state, its background will be in color NavyBlue(#120e5b)  .
Table & Application specific and Grid
Fig 5.1.1b Parameter of table & Application specific and Grid specific icons placement
  • User can select the raw by simply checking the checkbox and the raw background color will change to LightSkyBlue(#e0f3ff)  as shown in image below.
  • Cell record can wrap to 2 or more lines if the content is lengthy than column width, in such case height of the row will change and will take the auto height as shown in the image below.

5.1.2 Behaviour

While in smaller devices, behaviour of tables will be as follow. Other behaviour and its design specifications are explained in different use cases in Usage section 5.1.3.

  • Responsive
  • In the mobile/tablet screen, table will shrink to fit & will have auto hide the column to fit the size.
  • There will be one column added to collapse/expand the content in the hide column.
  • The same way, application specific actions & grid specific actions will collapse into dropdown menu, clicking on which different options will open. In dropdown menu both will be in different group as shown in the Fig 5.1.2.
Table in smaller devices
Fig 5.1.2 Table in smaller devices.

5.1.3 Usage

Table can be used anywhere it needs to organize the logical related data in grid, it has use cases listed below.

  • Record Editing

Record editing is possible by following ways.

  • User can edit the record for any cell by selecting that particular row by checking the checkboxes, or can directly putting cursor in the record cell, in such row will automatically selected and highlighted with color LightSkyBlue(#e0f3ff)  .
  • When user place a cursor in the cell of which record he wants to edit, that record will turn into textfield or dropdown select menu where either he can select the other record from the select menu options or either by direct input he can edit the record.
  • In the case if there is any UI level validation occurs its behaviour and design specifications will remain same as in validation section.
  • Successfully edited row background will change to LightSkyBlue(#e0f3ff) .
  • Similar way user can edit multiple record. Once User clicks on “Save” icon button in the application specific icons, all edited values are saved. While saving the data if there is any backend validation it will come in a dialog popup.
Single/Multiple Record Editing and Saving
Fig 5.1.3a Single/Multiple Record Editing and Saving
  • Single/Multiple & Range Record Selection

User can select the single/multiple or Range record row.

  • User can select the single record row simply by checking the checkbox. Same way he can select the multiple record by selecting checkbox accordingly. Selected row background color will turn to LightSkyBlue(#e0f3ff) . User can deselect the record by simply unchecking the checkbox.
  • User can also select all record by selecting the checkbox in column heading. A special guideline in this case checkbox in column heading in active state will have background NavyBlue(#120e5b)  . User can deselect all record by simply unchecking the heading checkbox.
  • In case if user need to select 1000 row, user need to click the range selection toggle button to active state. Later he can simply select the first record and last record. All in between record row will be selected.
  • In enable state, range selection toggle icon button will have color White(#ffffff)  and background will be NavyBlue(#120e5b)  , while in disable state it will have icon color NavyBlue(#120e5b)   and background color LighterGray(#f6f6f6)   or White(#ffffff)  .
Single/Multiple/Range record selection
Fig 5.1.3b Single/Multiple/Range record selection
  • Edit/Unedit/Add/Hide Column

Column can be editable/unedtiable, can be hidden, different column level actions can be possible.

  • User can make column editable/uneditable simply by selecting respective options from the column level action dropdown. Editable column heading background will be DarkBlue(#0c79c1)   while as default column heading will have background color SkyBlue(#2991d6)  will be uneditable.
  • User can also add column to left/right of the selected column by selecting respective action from the dropdown in this case a non-modal popup will open with details related to column properties to add.
  • Same way user can also hide the column by selecting appropriate options from the dropdown menu.
  • Record in the cell can be disable and it will have background color LighterGray(#f6f6f6)   & font color DimGray(#c5c5c5)  .
Editable/Uneditable, Add Column, Hide Coumn use case
Fig 5.1.3c Editable/Uneditable, Add Column, Hide Coumn use case
  • Sorting

Column can be sorted ascending/descending order. Either single or multiple column can be sorted.In case of multiple column sorting, there will be sorting order.

  • Column order will have three states. Default, Ascending & Descending. In default state order icon will have white color White(#ffffff)  . In ascending in order icon top icon will be White(#ffffff)   and bottom will be LightSkyBlue(#e0f3ff)  while in descending order it will be reverse of ascending. On loading of the grid first time, it will show the default column order
  • On first click it will be sorted in ascending order, on second click it will be sorted in descending order. On third click it will be again in ascending order and so on until the user will click on other column. When user click on other column, at that time, column order for the earlier sorting will be lost.
  • In case of multiple column order, user need to enable the sorting icon button, as shown in the image below.
Single, Multiple Column Sorting
Fig 5.1.3d Single, Multiple Column Sorting
  • In enable state, sorting icon button will have color White(#ffffff)   and background will be NavyBlue(#120e5b)  , while in disable state it will have icon color NavyBlue(#120e5b)   and background color LighterGray(#f6f6f6)   or White(#ffffff)  .
  • In case of multiple column order there will be an ordering. In this case order icon will have column sorting order number in between the top and bottom arrow White(#ffffff)  
  • The Sort order will be maintained until user click on any column without enabling multi-sort, as soon as user disable the multiple column sorting icon button and click on the sorting, all earlier column sorting will be lost.
Multiple Column Sorting Order
Fig 5.1.3e Multiple Column Sorting Order
  • Filter

On clicking the “Filter” button, User will be able to ‘add’ a filter

  • When it requires user need to click on the filter icon button on the table panel heading. Icon in this case wil have white background and icon color NavyBlue(#120e5b)  . Border at the bottom for the icon placeholder will be white.
  • By clicking on the filter icon it will open a section for the batch edit as shown in the image below.
  • User can select the pre-saved filter, or can do a new custom filter search which user can save for future references.
  • Once User ‘Add’ a filtering parameter, various filtering attributes are available to user to choose
Record Filter
Fig 5.1.3f Record Filter
  • Batch Update

If user needs to update same column with same value for multiple records, Batch Update option is available to user as follows

  • Select multiple records that needs to be updated. Click on “Batch Update” icon button in application specific icons.
  • A modal dialog popup will appear with column details, where user can perform the appropriate actions.
  • Once user click on the update button all respective column data will be updated and dialog popup disappear.
Batch Update Record
Fig 5.1.3g Batch Update Record
  • Add Record

A new record can be added by User as follows.

  • By clicking on “Add New” icon button in the grid specific icons, a modal dialog popup will appear.
  • Popup will have all details regarding adding new record, where user can perform the appropriate actions.
  • Once user submit, data will get saved and dialog popup disappear.
Add Record
Fig 5.1.3h Add Record
  • Recap View

A recap for column records can be created as follows.

  • By clicking on “Recap” in column specific dropdwon menu, a non-modal dialog popup will appear.
  • User can also select records to see the recap for the range of selected records.
  • User can view the column record details in the dialog.
  • User can close by clicking on the close icon, or clicking on flat actions.
Recap view of Type column
Fig 5.1.3i Recap view of Type column