Table (Grid): Configuration

In this topic, you can learn how to configure various parts of a table, such as the table toolbar and table columns.

Table Configuration

To specify the configuration parameters of a grid, you use the gridConfig decorator in TypeScript. You put the decorator on a definition of the view class for the table, as shown in the following example.

@gridConfig({
  preset: GridPreset.PrimaryInquiry,
  initNewRow: true, 
  quickFilterFields: ['AccountClassID', 'Type', 'PostOption', 'CuryID']
})
export class AccountRecords extends PXView {
}

For each table, you must specify a preset in the preset property of the gridConfig decorator. A preset is a predefined set of properties of the gridConfig decorator that define how the table is displayed. For more information about presets, see Form Layout: Grid Presets.

Table Columns

To specify the configuration parameters of a table column, you use the columnConfig decorator, as shown in the following example.

export class SOLine extends PXView {
    @columnConfig({ allowShowHide: GridColumnShowHideMode.Server })
    ExcludedFromExport: PXFieldState;
    IsConfigurable: PXFieldState;
    @columnConfig({ hideViewLink: true })
    BranchID: PXFieldState<PXFieldOptions.CommitChanges>;
}

Table Toolbar

The actions of the table toolbar must be defined in TypeScript. You use the PXActionState in the grid view class, which is the inheritor of the PXView class. (See the example below.) Actions of the table toolbar are not displayed on the form toolbar by default.

export class SOLine extends PXView {
    AddInvoice: PXActionState;
}

You can also handle the state and appearance of any action on the table toolbar with the actionsConfig property of the gridConfig decorator, as shown in the following examples.

// Hides the Refresh button from the table toolbar.
@gridConfig({
  actionsConfig: { refresh: { hidden: true } }
})
export class SOLine extends PXView

// Adds the Custom Refresh button.
@gridConfig({
  actionsConfig: {
    refresh: {
      renderAs: MenuItem.RENDER_TEXT,
      images: {},
      text: "Custom Refresh" }  
  }
})
export class POLine extends PXView