Class: CustomDatatable

CustomDatatable

A custom datatable with different configuration options.
Source:
Example
<c-custom-datatable
  object-api-name="Case"
  field-set-api-name="CaseFieldSet"
  where-conditions="Status = 'New'"
  hide-checkbox-column
  show-row-number-column
></c-custom-datatable>

Extends

  • LightningElement

Members

cardIcon :string

If show card option is active, the card icon is displayed in the header before the card title. It should contain the SLDS name of the icon. Specify the name in the format 'utility:down' where 'utility' is the category and 'down' the icon to be displayed.
Type:
  • string
Default Value:
  • ''
Source:
Example
'standard:case'

cardTitle :string

If show card option is active, the card title can include text and is displayed in the header above the table.
Type:
  • string
Default Value:
  • ''
Source:

columnWidthsMode :string

Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths. Set to 'auto' for column widths that are based on the width of the column content and the table width.
Type:
  • string
Default Value:
  • 'fixed'
Source:

defaultSortDirection :string

Specifies the default sorting direction on an unsorted column. Valid options include 'asc' and 'desc'.
Type:
  • string
Default Value:
  • 'asc'
Source:

fieldSetApiName :string

API name of the field set that specifies which fields are displayed in the table.
Type:
  • string
Source:

hideCheckboxColumn :boolean

If present, the checkbox column for row selection is hidden.
Type:
  • boolean
Default Value:
  • false
Source:

hideTableHeader :boolean

If present, the table header is hidden.
Type:
  • boolean
Default Value:
  • false
Source:

isUsedAsRelatedList :boolean

If present, the table is wrapped with the correct page header to fit better into the related list layout.
Type:
  • boolean
Default Value:
  • false
Source:

keyField :string

Required field for better table performance. Associates each row with a unique Id.
Type:
  • string
Default Value:
  • 'Id'
Source:

maxColumnWidth :number

The maximum width for all columns. The default is 1000px.
Type:
  • number
Default Value:
  • 1000
Source:

maxRowSelection :number

The maximum number of rows that can be selected. Checkboxes are used for selection by default, and radio buttons are used when maxRowSelection is 1.
Type:
  • number
Default Value:
  • 50
Source:

minColumnWidth :number

The minimum width for all columns. The default is 50px.
Type:
  • number
Default Value:
  • 50
Source:

objectApiName :string

API name of the object that will be displayed in the table.
Type:
  • string
Source:

readOnly :boolean

If present, then all datatable fields are not editable.
Type:
  • boolean
Default Value:
  • false
Source:

resizeColumnDisabled :boolean

If present, column resizing is disabled.
Type:
  • boolean
Default Value:
  • false
Source:

rowNumberOffset :number

Determines where to start counting the row number.
Type:
  • number
Default Value:
  • 0
Source:

showCard :boolean

If present, the table is wrapped in a lightning card to fit better into the overall page layout.
Type:
  • boolean
Default Value:
  • false
Source:

showDeleteRowAction :boolean

If present, the last column contains a delete record action.
Type:
  • boolean
Default Value:
  • false
Source:

showEditRowAction :boolean

If present, the last column contains a edit record action.
Type:
  • boolean
Default Value:
  • false
Source:

showMultipleRowDeleteAction :boolean

If present, a delete action button is available when multiple records are selected. This is only available if the checkbox column is visible and the table is either displayed with a Lightning Card or as a Related List.
Type:
  • boolean
Default Value:
  • false
Source:

showRowNumberColumn :boolean

If present, the row numbers are shown in the first column.
Type:
  • boolean
Default Value:
  • false
Source:

showViewRowAction :boolean

If present, the last column contains a view record action.
Type:
  • boolean
Default Value:
  • false
Source:

suppressBottomBar :boolean

If present, the footer that displays the Save and Cancel buttons is hidden during inline editing.
Type:
  • boolean
Default Value:
  • false
Source:

whereConditions :string

Optional where clause conditions for loaded data records.
Type:
  • string
Default Value:
  • ''
Source:
Example
Status = 'New'