Crayons

# DataTable (fw-data-table)

fw-data-table are used for data visualization.

# Basic Usage

Show Code

# Custom cells

# Crayons provided variants

# Anchor column variant

Row value for this column variant should be an object with the following properties:

  1. text - Text to be displayed in the cell
  2. href - url to point to when the text is clicked
  3. target - An optional argument specifying where to open the linked document. The possible values are:
    • _blank - Opens the linked document in a new window or tab.
    • _self - Opens the linked document in the same frame as it was clicked (this is default).
    • _parent - Opens the linked document in the parent frame.
    • _top - Opens the linked document in the full body of the window.
    • framename - Opens the linked document in the named iframe.
Show Code

# User column variant

Row value for this column variant should be an object with the following properties:

  1. name - Name of the user
  2. email - email of the user
  3. image (optional) - url of the user image to be displayed in the avatar

If image property is not present, user's initials from the name property will be shown inside the avatar.

Show Code

# Icon column variant

Show Code

# Paragraph column variant

We can use this column variant when we have a bigger text and we need to trim/show this text. Row value for this column variant should be an object with the following properties:

  1. text: Paragraph to trim. Only first three lines from this paragraph would be visible initially. User has to expand to see the full text.
Show Code

# Custom templates

This codeblock shows how to use custom cell function to display HTML content in a cell.

To have custom table headers, we can use 'customHeader' property. This will take in a function with parameters same as customTemplate.




 
 
 


  var columns = [{
    "key": "bookname",
    "text": "Book name",
    "customTemplate": (createElement, props) => {
      return createElement('b', {}, props.text);
    }
  }]

  // Usage examples for createElement:
  // Params should be either (tagName, children) or (tagName, properties, children)
  createElement('div', [createElement('h2', 'Hello')]);
  createElement('div#foo.bar.baz', [createElement('h2', 'Hello')]);
  createElement('div.bar.baz', [createElement('h2', 'Hello')]);
  createElement('div', {className: 'greeting'}, [createElement('h2', 'Hello')]);

# Column text alignment

You can set text alignment in the column by passing the textAlign in column configuration. In the below example, column 'Icon' is center aligned.

Show Code

# Row Actions

You can easily add an actions column by passing in rowActions prop to the component.

Show Code

# Using icons in row actions

You can also use icons instead of text in buttons. You can either pass the props for the icon as an object via the 'graphicsProps' or pass 'iconName' and 'iconLibrary' properties as part of configuration.

Show Code

# Row Actions as Menu

You can display row actions as a menu by setting the property showRowActionsAsMenu to true.

You can use icons along with text in the menu dropdown by passing rowActionsMenuVariant as 'icon'. Pass the props for the icon as an object via the 'graphicsProps' as part of configuration.

You can modify the header label of the row actions column by using the prop rowActionsHeaderLabel.

Show Code

# Hide columns

To hide certain columns, we can pass the 'hide' property set to true in the column's configuration.

'Role' column hidden in below table.

Show Code

# Column lock

We can lock column using 'lock' in column's configuration.

Show Code

# Column width

We can pass width for every column using 'widthProperties' in column's configuration. Every column has a minimum width of 40px and maximum width of 1000px by default. We can override min/max width for every column using the 'widthProperties' too.

'Name' column has 400px width and 'Role' column has 200px width.

Show Code

# Formatting data

We can format row's data before rendering into a cell by passing 'formatData' in column's configuration.

This option wont work when using this with 'variant' or 'customTemplate' properties in column's configuration.

Show Code

# Table settings

Table settings help with reordering and hide/show of columns. To enable table settings, pass the 'show-settings' prop to the table.

Show Code

# Loading table

We can load a table using the 'loadTable' method available on the table.

Load table

Show Code

# Saving column configuration

For auto saving configuration into localStorage, you can add 'autoSaveSettings' prop to the table.

  <data-table id="data-table-10" label="data table 10" auto-save-settings="true"> 
  </data-table>

Data table exposes couple of method to get and set column configuration.


 
 



  let dataTable = document.querySelector('data-table#config');
  // getColumnConfig helps retrive configuration in JSON format
  let dataTableConfiguration = dataTable.getTableSettings(); 
  // setColumnConfig helps set the configuration. 
  dataTable.setTableSettings(dataTableConfiguration);

# Properties

Property Attribute Description Type Default
autoSaveSettings auto-save-settings autoSaveSettings to enable auto saving of table settings to localstorage. If set to true, make sure id attribute is also set to the data-table boolean false
columns -- Columns Array of objects that provides information regarding the columns in the table. DataTableColumn[] []
isAllSelectable is-all-selectable isAllSelectable Boolean based on which select all option appears in the table header boolean false
isLoading is-loading To disable table during async operations boolean false
isSelectable is-selectable isSelectable Boolean based on which selectable options appears for rows in the table. boolean false
label label Label attribute is not visible on screen. There for accessibility purposes. string ''
rowActions -- To enable bulk actions on the table. DataTableActionWithGraphics[] \| DataTableAction[] []
rowActionsHeaderLabel row-actions-header-label Header label for row actions column any undefined
rowActionsMenuVariant row-actions-menu-variant Standard is the default option without any graphics other option is icon which places the icon at the beginning of the row. The props for the icon are passed as iconName and iconLibrary via the rowActions prop. "icon" \| "standard" 'standard'
rowActionsWidthProperties -- Ability to add width related properties to rowActions. Helps solve settings icon overlap with actions label. { width?: string; minWidth?: string; maxWidth?: string; } null
rows -- Rows Array of objects to be displayed in the table. DataTableRow[] []
shimmerCount shimmer-count shimmerCount number of shimmer rows to show during initial loading number 4
showRowActionsAsMenu show-row-actions-as-menu To show row actions as a kebab menu boolean false
showSettings show-settings showSettings is used to show the settings button on the table. boolean false

# Events

Event Description Type
fwSelectAllChange fwSelectAllChange Emits this event when select all is checked. CustomEvent<any>
fwSelectionChange fwSelectionChange Emits this event when row is selected/unselected. CustomEvent<any>

# Methods

# getSelectedIds() => Promise<string[]>

getSelectedIds

# Returns

Type: Promise<string[]>

an array of selected row IDs

# getSelectedRows() => Promise<DataTableRow[]>

getSelectedRows

# Returns

Type: Promise<DataTableRow[]>

selected rows from the data table

# getTableSettings() => Promise<{}>

getTableSettings

# Returns

Type: Promise<{}>

columnConfig object

# loadTable(state?: boolean) => Promise<boolean>

loadTable - Method to call when we want to change table loading state

# Returns

Type: Promise<boolean>

isLoading current state

# selectAllRows(checked?: boolean) => Promise<string[]>

selectAllRows method we can use to select/unselect rows in the table

# Returns

Type: Promise<string[]>

# setTableSettings(columnConfig: any) => Promise<DataTableColumn[]>

setTableSettings

# Returns

Type: Promise<DataTableColumn[]>

# Dependencies

# Depends on

# Graph

graph TD;
  fw-data-table --> fw-kebab-menu
  fw-data-table --> fw-custom-cell-anchor
  fw-data-table --> fw-custom-cell-user
  fw-data-table --> fw-custom-cell-icon
  fw-data-table --> fw-custom-cell-paragraph
  fw-data-table --> fw-checkbox
  fw-data-table --> fw-tooltip
  fw-data-table --> fw-button
  fw-data-table --> fw-icon
  fw-data-table --> fw-input
  fw-data-table --> fw-drag-container
  fw-data-table --> fw-skeleton
  fw-kebab-menu --> fw-popover
  fw-kebab-menu --> fw-button
  fw-kebab-menu --> fw-icon
  fw-kebab-menu --> fw-list-options
  fw-button --> fw-spinner
  fw-button --> fw-icon
  fw-list-options --> fw-select-option
  fw-list-options --> fw-input
  fw-select-option --> fw-icon
  fw-select-option --> fw-checkbox
  fw-select-option --> fw-avatar
  fw-checkbox --> fw-icon
  fw-input --> fw-icon
  fw-custom-cell-user --> fw-avatar
  fw-custom-cell-icon --> fw-icon
  fw-custom-cell-paragraph --> fw-tooltip
  fw-tooltip --> fw-popover
  style fw-data-table fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Datepicker (fw-datepicker) →