--- url: /awesome-lwc-collection/components/graphqlDatatable.md description: >- A custom datatable powered by the GraphQL wire adapter (lightning/graphql) instead of Apex. --- # GraphQL Datatable A custom datatable powered by the GraphQL wire adapter (`lightning/graphql`) instead of Apex. **Type:** Component **Available in:** App Page · Home Page · Record Page · Flow Screen ## Read on Medium **[Replace Apex with GraphQL in Your Salesforce UI Architecture](https://medium.com/capgemini-salesforce-architects/replace-apex-with-graphql-in-your-salesforce-ui-architecture-62693ff40f5b)** ## Attributes | Name | Type | Default | Description | | ------------------------------- | ------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | card-icon | 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. | | card-title | string | '' | If show card option is active, the card title can include text and is displayed in the header above the table. | | column-widths-mode | string | 'fixed' | 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. | | default-sort-direction | string | 'asc' | Specifies the default sorting direction on an unsorted column. Valid options include 'asc' and 'desc'. | | enable-pagination | boolean | false | If present, cursor-based pagination is enabled with page controls to navigate through records. | | enable-search | boolean | false | If present, a GraphQL-based search input is displayed to filter records across all text fields using the `like` operator. | | enable-sorting | boolean | false | If present, column headers become clickable to sort records via a GraphQL `orderBy` clause. Lookup and unknown field columns are excluded from sorting. | | fields | string | '' | Comma-separated list of field API names to display in the table. Example: `Name,Email,Phone`. | | hide-checkbox-column | boolean | false | If present, the checkbox column for row selection is hidden. | | hide-table-header | boolean | false | If present, the table header is hidden. | | is-used-as-related-list | boolean | false | If present, the table is wrapped in a card styled like a native related list, so it fits in with the related lists around it. | | key-field | string | 'Id' | Required field for better table performance. Associates each row with a unique Id. | | max-column-width | number | 1000 | The maximum width for all columns. The default is 1000px. | | max-row-selection | number | 50 | 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. | | min-column-width | number | 50 | The minimum width for all columns. The default is 50px. | | table-object-api-name | string | '' | API name of the object that will be displayed in the table. | | page-size | number | 10 | The number of records displayed per page when pagination is enabled. The default is 10. | | read-only | boolean | false | If present, then all datatable fields are not editable. | | resize-column-disabled | boolean | false | If present, column resizing is disabled. | | row-number-offset | number | 0 | Determines where to start counting the row number. | | show-card | boolean | false | If present, the table is wrapped in a lightning card to fit better into the overall page layout. | | show-delete-row-action | boolean | false | If present, the last column contains a delete record action. | | show-edit-row-action | boolean | false | If present, the last column contains a edit record action. | | show-multiple-row-delete-action | boolean | false | 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. | | show-row-number-column | boolean | false | If present, the row numbers are shown in the first column. | | show-view-row-action | boolean | false | If present, the last column contains a view record action. | | suppress-bottom-bar | boolean | false | If present, the footer that displays the Save and Cancel buttons is hidden during inline editing. | | where-conditions | string | '' | Optional GraphQL where clause conditions for loaded data records. Example: `{ Status: { eq: "New" } }`. | ## Usage ```html ``` All attributes are also configurable in the Lightning App Builder, so no code is required to use the component. ## Custom Labels The texts users see are Custom Labels, so they can be translated in Setup with the Translation Workbench. Copy them together with the component. | Name | Value | | ------------------------------------- | ------------------------------ | | DatatablePagination_First | First | | DatatablePagination_Last | Last | | DatatablePagination_Next | Next | | DatatablePagination_Previous | Previous | | DatatableUtils_Delete | Delete | | DatatableUtils_Edit | Edit | | DatatableUtils_View | View | | ErrorUtils_UnknownError | Unknown error | | GraphqlDatatable_Delete | Delete | | GraphqlDatatable_ErrorDeletingRecord | Error deleting record | | GraphqlDatatable_ErrorDeletingRecords | Error deleting records | | GraphqlDatatable_ErrorLoadingRecords | Error loading records | | GraphqlDatatable_ErrorUpdatingRecords | Error updating records | | GraphqlDatatable_Loading | Loading | | GraphqlDatatable_Page | Page {0} of {1} | | GraphqlDatatable_RecordCount | Showing {0}–{1} of {2} records | | GraphqlDatatable_RecordDeleted | Record deleted | | GraphqlDatatable_RecordsDeleted | Records deleted | | GraphqlDatatable_RecordsUpdated | Records updated | | GraphqlDatatable_Search | Search | | GraphqlDatatable_SearchPlaceholder | Search all fields... | | GraphqlDatatable_Success | Success | ## Component Dependencies | Name | Type | Description | | ------------------- | ---- | -------------------------------------------------------------------------------------- | | datatableExtension | LWC | Custom extension of the standard LWC datatable to support individual table cell types. | | datatableLookup | LWC | Custom datatable cell type to display lookup fields that are not supported by default. | | datatablePagination | LWC | Reusable pagination navigation bar with First, Previous, Next, and Last buttons. | | datatableUtils | LWC | Shared utility functions for row actions, CRUD operations, and datatable properties. | | errorUtils | LWC | Shared functions to read error messages and show error toasts. | | labelUtils | LWC | Shared function to fill the placeholders of Custom Labels. |