Table

Approved — Ready for dev

Tables will allow the user to view rows and columns of data presented to them. The table may allow the user to take actions for specific rows, edit or delete and download data.

Table

Anatomy


Use of AG Grid

Alkami will utilize the AG Grid JavaScrip framework for displaying complex tables. Iris will provide the visual style, but all functionality will be driven by AG Grid. The documentation below should be used for design conventions and for styling. HTML <table> styling will still be available via Iris Vue, even with simple tables where the use of AG Grid would be overkill.

  1. Select all selector - Checkbox (Optional)
  2. Single row selector - Checkbox (Optional)
  3. Slot 
  4. Heading - Overline (Optional)
  5. Sort - 24px Icon(Optional)
  6. Links - Compact button (Optional)
  7. Divider
  8. Overflow - Small No Emphasis QAB  (Optional)

Alignment

Content within the columns can either be left or right aligned. Most of the time, the content will be left aligned but there are times where it may need to be right aligned depending on the design. For example, the far right column with QAB actions are right aligned. Note: The table heading will follow the alignment of the column data.

Left aligned

Right aligned

Pagination 

Table pagination

The table pagination is used below tables and stretches the width of the table.

  1. Container
  2. Show label - Body 2
  3. Menu dropdown - Label (Body 2) and caret
  4. Entries - Body 2
  5. Total entries 
  6. Backward - No emphasis quick action button 
  7. Page numbers
  8. Forward - No emphasis quick action button

Load more button

This type of pagination is using a no emphasis button below a table to allow users to load more rows of the table. The user will continue to load more as they see fit. 

  1. Button - No Emphasis

Infinite scrolling

Infinite scrolling allows users to scroll the page and more rows will automatically appear below the previous rows. This will continue on till users scroll to the end of the table list. 

  1. Loader - circle-Indeterminate-24
  2. Loading text - Body 1 

Bulk Action Bar

The bulk action bar will show when a row has been selected and a user can take actions against that row. The buttons inside of the bulk action bar will take on the same padding and spacing as the normal buttons but have a different color palette. 

  1. Container
  2. Bulk action - Button text
  3. Items selected - Body 1
  4. Close - Small high emphasis quick action button

 Action menu

An action menu is needed when there is an overflow of actions on the far right of the actions column. This will take on the style of our Iris 2 dropdown. 

  1. Menu dropdown

Row Reordering (Drag & Sort)

When row reordering is needed, this can be done by either moving the table into an edit view or it may be the main objective for the table and have the reordering surfaced. View how it works on AG Grid.

Row Sorting

Sorting from ascending or descending order is possible by clicking the headers of columns that have sorting enabled. View how it works on AG Grid.

Table Header

The header for the table may be a title or use another component; for example switchboard. Actions for the entire table may be surfaced when needing to do an overall action. This can be done with either quick action buttons or regular buttons. For example, adding a new row of information, downloading table data, etc. 

  1. Header - (Optional)
  2. Global Actions - (Optional)

Applied filters

If a filter QAB is in the table header, the user can press the QAB and it would trigger a side sheet to show all the filters the user can apply. Once applied, chips would surface to the page with those filters and the QAB will surface a minimal badge to indicate filters have been applied.


Specs

Color

Element Property Value
Table heading Text color ∆colorPlatformGray900
Row Sort (Unsorted) Icon color ∆colorPlatformGray600
Row Sort (Sorted) Icon color ∆colorPlatform600
Page numbers Text color ∆colorPlatformGray900
Entries Text color ∆colorPlatformGray900
Loader Background color ∆colorBrandedGuidanceAccessible
Column (Static) Background color ∆colorPlatformColorWhite
Column (Selected) Background color ∆colorPlatform50
Bulk Action Bar Container Background color ∆colorBrandedAffordanceAccessible
Bulk Action Bar Link Text color ∆colorPlatformWhite

Elevation

Elevation is considered when rows are dragged to be sorted.


Element Property Value
Row reordering container Shadow Y offset ∆surfacePlatformRaisedShadowY
Row reordering container Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Row reordering container Shadow spread ∆surfacePlatformRaisedShadowSpread
Row reordering container (static) Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Row reordering container (hover) Shadow blur ∆surfacePlatformRaisedShadowBlurLifted
Row reordering container (pressed/active) Shadow blur ∆surfacePlatformRaisedShadowBlurPressed
Row reordering container (dragged) Shadow blur ∆surfacePlatformRaisedShadowBlurLifted

Spacing


States

Links

Selecting rows

Row Rearranging

Bulk action bar

Sorting

Theming

No theming considered for tables.


Placement

Bulk bar

The bulk bar will take over any filter chips within the table so the user cannot filter while in this mode. If there is a table header like a title or global actions then those will stay.


Auto Width

The table should take up the width of the container it is housed in and each cell, except the checkboxes, will stretch to fill that container width. 

Responsive 

There are two options for responsiveness; horizontal scrolling or resizing without a scroll which will just fit a few items within the table. The table header will shrink to fit the width of the container and the pagination will switch to just the page options. the View how it works on AG Grid.

Behavior

Behavior will be defined by AG Grid


Developer Docs

Vue Developer Docs

Component documentation coming soon!