Table (Grid): Reference Information

In the tables of this topic, you can find reference information about tables in the UI, which are also called grids.

Conversion from ASPX to HTML and TypeScript

The following tables will help you to convert ASPX elements that are related to tables to HTML or TypeScript elements.

Table 1. ActionBarThe following table shows the correspondence between the ActionBar ASPX element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
ActionBar
<px:PXGrid>
  <ActionBar>
    <CustomItems>
      <px:PXToolBarButton
        Text="Add Invoice"
        CommandSourceID="ds"
        CommandName="AddInvoice" />
    </CustomItems>
  </ActionBar>
</px:PXGrid>
 To specify the toolbar buttons for the grid, define actions in the view class of the grid in TypeScript, as shown in the following code.
export class SOLine extends PXView {
    AddInvoice: PXActionState;
}
You can also specify particular action properties with the actionsConfig and defaultAction properties in the gridConfig decorator.
DefaultAction
<px:PXGrid>
  <ActionBar 
    DefaultAction="EditDetail"/>
</px:PXGrid>
 Use the defaultAction property of the gridConfig decorator, as shown in the following code. The property specifies the action that is executed when a user double-clicks a record in the table.
@gridConfig({
  defaultAction: "EditDetail"
})
export class EPApproval 
  extends PXView
Table 2. AutoCallbackThe following table shows the correspondence between the AutoCallback ASPX element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
AutoCallback
<px:PXGrid>
  <AutoCallBack
    Command="save"
    Target="view1">
  </AutoCallBack>
</px:PXGrid>
 Use the autoRepaint property in the gridConfig decorator, as shown in the following code. The property refreshes the specified data view depending on the record selected in the table.
@gridConfig({
  autoRepaint: ["view1"]
})
export class Approvals extends PXView
Table 3. ModeThe following table shows the correspondence between the Mode ASPX element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
AllowAddNew
<px:PXGrid>
  <Mode AllowAddNew="True"/>
</px:PXGrid>
 Use the allowInsert property of the gridConfig decorator. If the value is true, this property indicates that a user can insert new records directly in the table. The following code uses this property.
@gridConfig({
  allowInsert: true
})
export class Approvals extends PXView
AllowDelete
<px:PXGrid>
  <Mode AllowDelete="True"/>
</px:PXGrid>
 Use the allowDelete property of the gridConfig decorator. If the value is true, this property indicates that a user can delete records directly in the table. The following code uses this property.
@gridConfig({
  allowDelete: true
})
export class Approvals extends PXView
AllowRowSelect
<px:PXGrid>
  <Mode AllowRowSelect="True"/>
</px:PXGrid>
 Use the allowRowSelect property of the gridConfig decorator. If the value is true, this property indicates that a user can select a row in the table. The following example uses this property.
@gridConfig({
  allowRowSelect: false
})
export class Approvals extends PXView
AllowUpdate
<px:PXGrid>
  <Mode AllowUpdate="True"/>
</px:PXGrid>
 Use the allowUpdate property of the gridConfig decorator. If the value is true, this property indicates that a user can update records in the table. The following code uses this property.
@gridConfig({
  allowUpdate: true
})
export class Approvals extends PXView
InitNewRow
<px:PXGrid>
  <Mode InitNewRow="True"/>
</px:PXGrid>
 Use the initNewRow property of the gridConfig decorator. If the value is true, this property indicates that the webpage should perform a server callback upon the insertion of a new row.

Normally, when a user clicks the Add Row button on a table toolbar, the new empty row is created only on the webpage, and the data is not sent to the application server. This means that the C# code with all event handlers is not executed. For the data to be sent to the server, you need to specify initNewRow: true. Also, by specifying this property, you can avoid an extra row being created automatically when a user clicks the Save button.

The following code uses this property.
@gridConfig({
    initNewRow: true
})
export class AccountRecords
  extends PXView
Table 4. PXGridThe following table shows the correspondence between the PXGrid ASPX control and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXGrid
<px:PXGrid
  ID="grid"
  runat="server"
  Height="350px"
  Width="100%"
  AdjustPageSize="Auto"
  SkinID="Primary"
  AllowSearch="True"
  FastFilterFields=
    "AccountCD,Description"
  SyncPosition="True">
  <Levels>
    <px:PXGridLevel
      DataMember="AccountRecords">
    </px:PXGridLevel>
  </Levels>
  <Layout
    FormViewHeight="250px" />
  <AutoSize
    Container="Window"
    Enabled="True"
    MinHeight="200" />
  <Mode
    AllowFormEdit="True"
    AllowUpload="True" />
</px:PXGrid>
 Is replaced by qp-grid in HTML. To define a table, you need to instantiate a view class with the gridConfig decorator in TypeScript and add a qp-grid tag in HTML, as shown in the following code fragments.
@graphInfo({ ... })
export class GL103001 
  extends PXScreen {
AccountRecords = 
  createCollection(GLConsolAccount);
}

@gridConfig({
  preset: GridPreset.PrimaryInquiry,
  initNewRow: true
})
export class GLConsolAccount
  extends PXView
<qp-grid
  id="gridAccountRecords"
  view.bind="AccountRecords">
</qp-grid>
AdjustPageSize
<px:PXGrid AdjustPageSize="Auto">
</px:PXGrid>
 Use the adjustPageSize property in the gridConfig decorator, as shown in the following example. If the value is true, this property makes the table show only one page of rows, without the vertical scrollbar. The following code uses this property.
@gridConfig({
    adjustPageSize: true
})
export class ActivityTypes
  extends PXView
AllowFilter
<px:PXGrid AllowFilter="True">
</px:PXGrid>
 Use the allowStoredFilters in the gridConfig decorator, as shown in the following code. If the value is true, the system adds the Search box for the table. The following code uses this property.
@gridConfig({
  allowStoredFilters: false
})
export class AppointmentData 
  extends PXView
AllowPaging
<px:PXGrid AllowPaging="True">
</px:PXGrid>
 Use the pagerMode property in the gridConfig decorator, as shown in the following code. The property defines whether pages should be displayed for the table. The property can have one of the following values, which are defined by the GridPagerMode enum:
  • InfiniteScroll: No pages for the table are displayed. A user can only scroll the records of the table.
  • NextPrevFirstLast: The Next, Previous, First, and Last links are displayed for the pages of the table. A user can use these links to switch between the pages of the table.
  • Numeric: The page numbers are displayed as links that a user can click to switch between the pages of the table.
The following code uses this property.
@gridConfig({
  pagerMode:
    GridPagerMode.NextPrevFirstLast
})
export class FASheetHistory
  extends PXView
AutoAdjustColumns
<px:PXGrid 
  AutoAdjustColumns="True">
</px:PXGrid>
 Use the autoAdjustColumns property in the gridConfig decorator. If the value is true, the property makes the system adjust the column width automatically. The following code uses this property.
@gridConfig({
  autoAdjustColumns: true
})
export class ARDiscount 
  extends PXView
AutoGenerateColumns
<px:PXGrid
  AutoGenerateColumns="AppendDynamic">
</px:PXGrid>

Use the generateColumns property of the gridConfig decorator. The property defines the mode of column generation for the table. You can use one of the following modes, which are defined in the GridColumnGeneration enum:

  • None
  • Append
  • Recreate
  • AppendDynamic
  • Selector
The following example assigns the AppendDynamic mode for the table.
@gridConfig({
  generateColumns:
    GridColumnGeneration.AppendDynamic
})
export class Parameters extends PXView
AutoSaveLayout
<px:PXGrid
  AutoSaveLayout="True">
</px:PXGrid>
 Use the autoSaveLayout property of the gridConfig decorator. If the value is true, the property makes the system save the layout of the table after each column is resized. The following code uses this property.
@gridConfig({
  autoSaveLayout: true
})
export class Parameters 
  extends PXView
BatchUpdate
<px:PXGrid
  BatchUpdate="True">
</px:PXGrid>
 Use the batchUpdate property of the gridConfig decorator, as shown in the following code. If a table contains editable fields that depend on each other, the BatchUpdate property should be false.
@gridConfig({
  batchUpdate: true
})
export class APInvoice 
  extends PXView
Caption
<px:PXGrid
  Caption="Schedules">
</px:PXGrid>
 Use the caption attribute of the qp-grid control in HTML. The attribute defines a title for the table. When the table is hidden, the title specified in the caption attribute is hidden too.
Note: Do not use the qp-caption or qp-label tags to specify a table title.
The following code specifies a title for the table.
<qp-grid 
  id="ordersGrid"
  view.bind=
    "BlanketOrderChildrenDisplayList"
  caption="Child Orders">
</qp-grid>
EditPageUrl
<px:PXGrid
  EditPageUrl="~/Pages/AP/AP203500.aspx">
</px:PXGrid>
 Use the gridDataUrl property in the gridConfig decorator. You can use this property to change the standard API for the retrieval of the table data.
FastFilterFields
<px:PXGrid
  FastFilterFields=
    "ClassID,Type,Description">
</px:PXGrid>

Use allowFastFilter in the columnConfig decorator for the needed columns or fastFilterByAllFields in the gridConfig decorator. Take into account the following considerations:

  • The Search box is shown by default. The search is performed by all string columns.
  • To hide the Search box, it is sufficient to specify fastFilterByAllFields: false and make sure that none of the columns have allowFastFilter: true.
  • To exclude particular columns from the search, fastFilterByAllFields is not needed; you need to use allowFastFilter: false.
  • To have only particular columns searched, you can set fastFilterByAllFields: false and allowFastFilter: true for only these columns.
FastFilterId
<px:PXGrid
  FastFilterID="edInventory">
</px:PXGrid>
 Use the fastFilterId property in the gridConfig decorator. The property specifies the ID of the field whose value is used as the fast filter for the table. The following code uses this property.
@gridConfig({
  fastFilterID: 'edInventory'
})
export class Items extends PXView
FilesIndicator
<px:PXGrid
  FilesIndicator="True">
</px:PXGrid>
 Use the suppressNoteFiles property in the gridConfig decorator. This property hides the Note and File columns from the table. The following code uses this property.
@gridConfig({
  suppressNoteFiles: true
})
export class RecipientProjects
  extends PXView
ID
<px:PXGrid ID="gridUsers">
</px:PXGrid>
 Use the id attribute of the qp-grid control in HTML. The attribute specifies the ID of the control, as shown in the following code.
<qp-grid id="gridUsers">
</qp-grid>
NoteIndicator
<px:PXGrid
  NoteIndicator="True">
</px:PXGrid>
 Use the suppressNoteFiles property in the gridConfig decorator. This property hides the Note and File columns from the table. The following code uses this property.
@gridConfig({
  suppressNoteFiles: true
})
export class RecipientProjects
  extends PXView
PageSize
<px:PXGrid PageSize="12">
</px:PXGrid>
 Use the pageSize property in the gridConfig decorator. This property specifies the maximum number of records on a page if the table is displayed on multiple pages. The following code uses this property.
@gridConfig({
  PageSize: 12
})
export class RecipientProjects
  extends PXView
PreserveSortsAndFilters
<px:PXGrid 
  PreserveSortsAndFilters="True">
</px:PXGrid>
 Use the preserveSortsAndFilters property in the gridConfig decorator. If the value is true, this property specifies that the current filter and sorted columns should be stored in the session. By default, the value is false.

The following code uses this property.

@gridConfig({
  preserveSortsAndFilters: true
})
export class BPEventHistory 
  extends PXView
SkinID
<px:PXGrid 
  SkinID="Details">
</px:PXGrid>
 Use the preset property of the gridConfig decorator. The property specifies a set of settings that define the appearance of the table. The following values, which are defined by the GridPreset enum, are available:
  • Primary
  • PrimaryInquiry
  • Inquiry
  • Details
  • Attributes
  • ShortList
  • Empty

For more information about presets, see Form Layout: Grid Presets.

The following code uses this property.
@gridConfig({
    preset: GridPreset.Primary
})
export class AccountRecords 
  extends PXView
StatusField
<px:PXGrid 
  StatusField="Availability">
</px:PXGrid>
 Use the statusField property of the gridConfig decorator. The property specifies the name of the column that is displayed in the footer of the table. The following code uses this property.
@gridConfig({
  statusField: "Availability"
})
export class SOLine extends PXView
SyncPosition
<px:PXGrid
  SyncPosition="True">
</px:PXGrid>

Use the syncPosition property of the gridConfig decorator. If the value is true, the property specifies that the Current record must be synchronized with the record selected in the table.

Tip:

If a form contains a table and the form toolbar includes an action to process a single record that is selected in the table, the action delegate method must have a reference to the selected record in the cache.

To use the Current property of a PXCache object to access the record selected in a table, the Current property must be synchronized with the record selected in the grid. To force the system to provide this synchronization, you have to set the syncPosition property of the gridConfig decorator to true.

The following code uses this property.
@gridConfig({
    syncPosition: true
})
export class FABookBalance
  extends PXView
TabIndex
<px:PXGrid
  TabIndex="-1">
</px:PXGrid>
 Use the tabIndex property of the gridConfig decorator. The property specifies the index of the table during the TAB navigation. The following code uses this property.
@gridConfig({
  tabIndex: -1
})
export class SOLine extends PXView
Table 5. PXGridColumnThe following table shows the correspondence between the PXGridColumn ASPX control and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXGridColumn
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          AllowNull="False"
          DataField="Selected"
          TextAlign="Center"
          Type="CheckBox" Width="40px"
          AutoCallBack="true"
          AllowCheckAll="true"
          CommitChanges="true" 
        />
        <px:PXGridColumn
          DataField="InventoryCD"
          DisplayFormat="&gt;AAAAAAAAAA" 
        />
        <px:PXGridColumn
          DataField="ProductWorkgroupID" 
        />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Define columns in the view class of the table in TypeScript, as shown in the following example.
export class SOLine extends PXView {
  Availability:
    PXFieldState<PXFieldOptions.Hidden>;
  @columnConfig({
    allowShowHide:
      GridColumnShowHideMode.Server
  })
  ExcludedFromExport: PXFieldState;
}
AllowCheckAll
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          DataField="Selected"
          AllowCheckAll="true" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowCheckAll property in the columnConfig decorator, as shown in the code below. If the value is true, the system adds a check box in the header of the column, which gives the user the ability to select all check boxes in the column for the page.
@columnConfig({
  allowCheckAll: true
})
Selected: PXFieldState;
AllowFilter
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowFilter="true" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowFilter property in the columnConfig decorator, as the following code shows. If the value is true, the system adds column filtering in the header of the column.
@columnConfig({
  allowFilter: true
})
Type: PXFieldState;
AllowFocus
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowFocus="true" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowFocus property in the columnConfig decorator, as the following code shows. If the value is true, the system places the cursor in the column when a new record is added to the table.
@columnConfig({
  allowFocus: true
})
Type: PXFieldState;
AllowNull
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowNull="false" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowNull property in the gridConfig decorator, as shown below. If the value is false, the system prevents the cell value from being cleared.
@columnConfig({ 
  allowNull: false 
})
PaymentLeadTime: PXFieldState;
AllowShowHide
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowShowHide="false" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowShowHide property in the columnConfig decorator. The property manages a user's ability to show or hide the column in the table. (The user can show or hide the column in the Column Configuration dialog box.)

The property can have one of the following values, which are defined by the GridColumnShowHideMode enum:

  • False: The user cannot show or hide the column. The column appears in the table by default.
  • True: The user can show or hide the column. Whether the column appears in the table by default depends on the field state.
  • Server: The possibility to show or hide the column is managed on the server. The user can show or hide the column if the server has set visible: true.
  • Client: The user can show or hide the column. The column appears in the table by default. The server does not manage visibility of the column.

The following code shows an example of the use of this property.

@columnConfig({ 
  allowShowHide: 
    GridColumnShowHideMode.False 
})
OriginalContactID: PXFieldState;
AllowSort
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowSort="false" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the AllowSort property of the columnConfig decorator, as shown in the following code. If the value is false, the property turns off the capability for a user to sort the values in the column. 
@columnConfig({ 
  allowSort: false
})
ContactID: PXFieldState;
AllowUpdate
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          AllowUpdate="true" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the allowUpdate property of the columnConfig decorator. If the value is true, the property indicates that a user can update the value in the column. The following example uses this property.
@columnConfig({ 
  allowUpdate: true
})
ContactID: PXFieldState;
CommitChanges
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          DataField="Selected"
          CommitChanges="true" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use PXFieldOptions.CommitChanges in TypeScript, as shown in the following code. The option indicates that the webpage commits the changes in the column to the server.
export class Details extends PXView {
  Selected:
    PXFieldState<
      PXFieldOptions.CommitChanges>;
}
DataField
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          DataField="ProductID" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Define data field for the column in the view class of the table in TypeScript, as shown in the following code.
export class Details extends PXView {
  ProductID: PXFieldState;
}
Decimals
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          DataField="RatioPerYear"
          DataType="Decimal"
          Decimals="4" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the decimals property of the columnConfig decorator. The property defines the number of decimal values to be displayed in the column cells. The following example uses this property.
@columnConfig({ decimals: 4})
RatioPerYear: PXFieldState;
DisplayMode
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          DisplayMode="Hint" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the displayMode property in the columnConfig decorator, as shown in the code below. The property specifies the display mode for each cell of the column. The display mode, which is defined by the GridColumnDisplayMode enum, can be one of the following:
  • Value (default): The column cell contains the value of the field.
  • Text: If there is a description defined for the field, the column cell contains the description of the field.
  • Hint: If there is a description defined for the field, the column cell contains both the value of the field and the description of the field.
@columnConfig({
  displayMode: 
    GridColumnDisplayMode.Text
})
EMailAccountID: PXFieldState;
ForceExport
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          ForceExport="True" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the suppressExport property of the columnConfig decorator. If the value is true, the property specifies that the column is not included in the results of the export of the table. The following code uses this property.
@columnConfig({
  suppressExport: false
})
LineNbr: PXFieldState;
Key
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          Key="valueMapping" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the key property of the columnConfig decorator. The property specifies the key for unbound columns, such as Notes and Files. The following code uses this property.
@columnConfig({
  key: "valueMapping"
})
Value: PXFieldState;
LinkCommand
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          LinkCommand=
            "ViewDetails" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the linkCommand decorator for the column field in TypeScript, as shown in the following example. The decorator specifies the action that is executed when a user clicks the link in the column cell.
@linkCommand("ViewDetails")
AttributeID:
  PXFieldState;
MaxLength
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          MaxLength="30" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the maxLength property in the columnConfig decorator. The property specifies the maximum length of the string in the column. The following code uses this property.
@columnConfig({
  maxLength: 30
})
Value: PXFieldState;
NullText
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          NullText="0.0" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the nullText property in the columnConfig decorator. The property specifies the value that is displayed if the column value is NULL. The following code uses this property.
@columnConfig({
  nullText: "0.0"
})
Amount: PXFieldState;
TextAlign
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          TextAlign="Right" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>

Use the textAlign property in the columnConfig decorator. The property specifies the alignment of the values in the column. You can use one of the following values, which are defined in the TextAlign enum:

  • NotSet
  • Left
  • Center
  • Right
  • Justify
The following code uses this property.
@columnConfig({
  textAlign: TextAlign.Center
})
Included: PXFieldState;
TextField
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          TextField="LocalizedDescr" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the textField property in the columnConfig decorator. The property specifies explicitly which field should be displayed in the column selector control. The following code uses this property.
@columnConfig({
  textField: "LocalizedDescr"
})
Descr: PXFieldState;
TimeMode
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn 
          TimeMode="True" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the timeMode property in the columnConfig decorator. If the value is true, the property turns on the time mode for the date and time column. The following code uses this property.
@columnConfig({
  timeMode: true
})
Time: PXFieldState;
Type
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          Type="HyperLink" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>

Use the type property in the columnConfig decorator. The property specifies the type of the column content. You can use one of the following values, which are defined by the GridColumnType enum:

  • NotSet
  • Icon
  • HyperLink
  • CheckBox

The following code uses this property.

@columnConfig({
  type: GridColumnType.HyperLink
})
ScreenId: PXFieldState;
Visible
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          Visible="False" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>

Use PXFieldOptions.Hidden in TypeScript, as shown in the following code.

export class Details 
  extends PXView {
  Selected:
    PXFieldState<
      PXFieldOptions.Hidden>;
}

In particular cases, you can use the visible property of the columnConfig decorator, as shown in the following code. 

@columnConfig({
  visible: false
})
OwnerID: PXFieldState;

Columns with allowShowHide: GridColumnShowHideMode.False or allowShowHide: GridColumnShowHideMode.Client appear in the table by default.

Width
<px:PXGrid>
  <Levels>
    <px:PXGridLevel>
      <Columns>
        <px:PXGridColumn
          Width="200px" />
      </Columns>
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
 Use the width property in the columnConfig decorator. The property specifies the width of the column. The width is defined in pixels. The following code uses this property.
@columnConfig({ 
  width: 200 
}) 
ExpireDate: PXFieldState;
Table 6. PXGridLevelThe following table shows the correspondence between the PXGridLevel ASPX element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
DataMember
<px:PXGrid>
  <Levels>
    <px:PXGridLevel
      DataMember="AccountRecords">
    </px:PXGridLevel>
  </Levels>
</px:PXGrid>
  1. Define a view class in TypeScript, as shown in the following code.
    export class RS501600 
  extends PXScreen {
    Records = 
      createCollection(AccountRecords);
}

@gridConfig({...})
export class AccountRecords
  extends PXView
  2. Bind the qp-grid control to the instance of the view class by using the view.bind property as follows.
    <qp-grid view.bind="Records">
</qp-grid>
Table 7. PXGridWithPreviewThe following table shows the correspondence between the PXGridWithPreview ASPX control and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXGridWithPreview
<pxa:PXGridWithPreview
  ID="gridActivities" runat="server" 
  DataSourceID="ds" Width="100%" 
  AllowSearch="True" 
  DataMember="Activities" 
  AllowPaging="true" 
  NoteField="NoteText"
  FilesField="NoteFiles" 
  BorderWidth="0px" 
  GridSkinID="Inquire"  
  PreviewPanelSkinID="Preview" 
  SyncPosition="True"
  BlankFilterHeader="All Activities" 
  MatrixMode="true" 
  PrimaryViewControlID="form">
</pxa:PXGridWithPreview>

To define a grid with a preview text editor below, use the qp-splitter tag, as shown in the following example. 

<qp-splitter split="height">
  <split-pane>
    <qp-grid
      id="gridActivities"
      view.bind="Activities"
      wg-container="">
    </qp-grid>
  </split-pane>
  <split-pane>
    <qp-rich-text-editor
      id="edActivityBody"
      state.bind="Activities.Body"
      wg-field
      value.bind=
        "Activities.activeRow.Body.value"
      config.bind="{readOnly: true}">
    </qp-rich-text-editor>
  </split-pane>
</qp-splitter>
Table 8. Obsolete ASPX Controls and PropertiesThe following table lists the obsolete ASPX elements that are related to tables. You do not need to replace these ASPX elements with any HTML or TypeScript elements.
ASPX Control Properties
CallbackCommands
<px:PXGrid>
  <CallbackCommands
    PasteCommand="PasteLine">
    <Save PostData="Container" />
  </CallbackCommands>
</px:PXGrid>
 All properties
ClientEvents
<px:PXGrid>
  <ClientEvents 
    CellEditorCreated="gridEditor" 
    BeforeCellEdit="gridBeforeEdit" />
</px:PXGrid>
 All properties
OnChangeCommand
<px:PXGrid>
  <OnChangeCommand
    Target="tree"
    Command="Refresh" />
</px:PXGrid>
 All properties
Mode 
<px:PXGrid>
  <Mode 
    AllowDragRows="True" 
    AllowFormEdit="True" />
</px:PXGrid>
  • AllowDragRows
  • AllowFormEdit
  • AllowUpload
PXGrid
<px:PXGrid 
  AllowSearch="True"
  BorderWidth="0px" 
  CaptionVisible="False"
  DataSourceID="ds" 
  ExportNotes="False"
  Height="360px"
  KeepPosition="True"
  MarkRequired="Dynamic" 
  PreservePageIndex="True"
  RepaintColumns="True"
  RestrictFields="True"
  runat="server"
  Style="height: 192px;"
  Width="100%"
>
</px:PXGrid>
  • AllowSearch
  • BorderWidth
  • CaptionVisible
  • DataSourceID
  • ExportNotes
  • Height
  • KeepPosition
  • MarkRequired
  • PreservePageIndex
  • RepaintColumns
  • RestrictFields
  • runat
  • Style
  • Width

qp-grid Control

The following table lists the properties of the qp-grid control, which represents a table in HTML.

Property Description
caption Defines a title for the table. When the table is hidden, the title specified in the caption attribute is hidden too.
Note: Do not use the qp-caption or qp-label tags to specify a table title.
The following code specifies a title for the table.
<qp-grid 
  caption="Child Orders">
</qp-grid>
id Specifies the ID of the control, as shown in the following code.
<qp-grid id="gridUsers">
</qp-grid>
view.bind Specifies the data view that provides fields for the table. The data view must be defined in the TS file. You must use the bind command with this attribute, as the following code shows.
<qp-grid view.bind="Records">
</qp-grid>

gridConfig Decorator

The following table lists the properties of the TypeScript gridConfig decorator, which is used for the configuration of a table.

Property Description
actionsConfig Handles the state and appearance of an action. The following code shows examples of the use of this property.
// 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
adjustPageSize Makes the table (if the value is true) show only one page of rows, without the vertical scrollbar. You assign this property so that the system can build the select top(x) SQL query for the table. The following example uses this property.
@gridConfig({
    adjustPageSize: true
})
export class ActivityTypes
  extends PXView
allowDelete If the value is true, indicates that a user can delete records directly in the table. The following example uses this property.
@gridConfig({
  allowDelete: true
})
export class Approvals extends PXView
allowFilter If the value is false, prohibits any filtering in the table. The following example uses this property.
@gridConfig({ 
  allowFilter: false 
})
export class Approvals extends PXView
allowImport If the value is true, indicates that the Load Records from File button is available on the table toolbar. The following example uses this property.
@gridConfig({ 
  allowImport: true 
})
export class Approvals extends PXView
allowInsert If the value is true, indicates that a user can insert new records directly in the table. The following example uses this property.
@gridConfig({
  allowInsert: true
})
export class Approvals extends PXView
allowRowSelect If the value is true, indicates that a user can select a row in the table. The following example uses this property.
@gridConfig({
  allowRowSelect: false
})
export class Approvals extends PXView
allowSkipTabs If the value is true, indicates that a user can select the columns that are skipped during navigation with the Tab key. The following example uses this property.
@gridConfig({
  allowSkipTabs: true
})
export class Approvals extends PXView
allowSort If the value is false, prohibits any sorting in the table columns. The following example uses this property.
@gridConfig({
  allowSort: false
})
export class Approvals extends PXView
allowStoredFilters If the value is true, adds the Search box for the table. The following example uses this property.
@gridConfig({
  allowStoredFilters: false
})
export class AppointmentData 
  extends PXView
allowUpdate If the value is true, indicates that a user can update records in the table. The following example uses this property.
@gridConfig({
  allowUpdate: true
})
export class Approvals extends PXView
autoRepaint Refreshes the specified data view depending on the record selected in the table. The following example uses this property.
@gridConfig({
  autoRepaint: ["view1"]
})
export class Approvals extends PXView
autoAdjustColumns If the value is true, makes the system adjust the column width automatically. The following code uses this property.
@gridConfig({
  autoAdjustColumns: true
})
export class ARDiscount 
  extends PXView
autoGrowInHeight

Indicates whether the table height depends on the number of rows in the table. You can use one of the following values, which are defined in the GridAutoGrowMode enum:

  • False: The height does not depend on the number of lines.
  • Fit: The height fits the number of lines in the table.
  • Fill: The height fits the number of lines in the table. However, if the table contains few lines, the table will fill all available space in the container that contains the table.
autoSaveLayout If the value is true, saves the layout of the table after each column resizing. The following code uses this property.
@gridConfig({
  autoSaveLayout: true
})
export class Parameters 
  extends PXView
batchUpdate If the value is true. indicates that the records in the table can be updated in a batch. If a table contains editable fields that depend on one another, the BatchUpdate property should be false. The following code uses this property.
@gridConfig({
  batchUpdate: true
})
export class APInvoice 
  extends PXView
caption Specifies the title of the table. Generally, you use the caption attribute of the qp-grid tag to specify the title of the table.
columns Defines the list of columns for the table. Generally, you do not need to use this property.
columnsConfig Defines the configuration of columns for the table. Generally, you do not need to use this property.
dataField Is a service field. Do not use it.
defaultAction Specifies the action that is executed when a user double-clicks a record in the table. The following code uses this property.
@gridConfig({
  defaultAction: "EditDetail"
})
export class EPApproval 
  extends PXView
exportRowsLimit Specifies the maximum number of records that can be exported to Excel. The following code uses this property.
@gridConfig({
  exportRowsLimit: 100
})
export class EPApproval 
  extends PXView
fastFilterByAllFields

If the value is true, turns on fast filtering by string columns. (That is, if a user searches the grid by using the Search box on the table toolbar, the search is performed by string fields.) However, a string column is excluded from fast filtering if it has allowFastFilter: false.

The value is true by default.

You can set it to false, and if there are no columns with allowFastFilter: true, the Search box in the table toolbar will disappear.

The following code uses this property.
@gridConfig({
  fastFilterByAllFields: false
})
export class CSAnswers 
  extends PXView
fastFilterId Specifies the ID of the field whose value is used as the fast filter for the table. The following code uses this property.
@gridConfig({
  fastFilterID: 'edInventory'
})
export class Items extends PXView
filterRowsView Specifies the data view that provides filter rows. Generally, you do not need to use this property.
filterView Specifies the data view that provides filter headers. Generally, you do not need to use this property.
generateColumnsAfterSelect Indicates that the column should be generated after the ExecuteSelect method is performed on the server.
@gridConfig({
  generateColumnsAfterSelect: true
})
export class AUAuditKeys extends PXView
generateColumns

Defines the mode of column generation for the grid. You can use one of the following modes, which are defined in the GridColumnGeneration enum:

  • None
  • Append
  • Recreate
  • AppendDynamic
  • Selector
The following example assigns the AppendDynamic mode for the table.
@gridConfig({
  generateColumns:
    GridColumnGeneration.AppendDynamic
})
export class Parameters extends PXView
generateProcessColumns Is used internally for tables in processing dialog boxes. Do not use this property.
graph Specifies the graph that should be used for the logic of the table. Generally, you do not need to use this property.
gridDataUrl Specifies the URL that should be used to retrieve the table data. You can use this property to change the standard API for the retrieval of the table data.
initNewRow If the value is true, indicates that the webpage should perform a server callback upon the insertion of a new row.

Normally, when a user clicks the Add Row button on a table toolbar, the new empty row is created only on the webpage, and the data is not sent to the application server. This means that the C# code with all event handlers is not executed. For the data to be sent to the server, you need to specify initNewRow: true. Also, by specifying this property, you can avoid an extra row being created automatically when a user clicks the Save button.

The following code uses this property.
@gridConfig({
    initNewRow: true
})
export class AccountRecords
  extends PXView
mergeToolbarWith Merges the table toolbar with the specified component, such as the form toolbar. To merge the table toolbar with the form toolbar, you specify ScreenToolbar as the value of the property, as shown in the following code.
@gridConfig({
  mergeToolbarWith: 'ScreenToolbar'
})
export class Records
  extends PXView
pagerMode Defines whether pages should be displayed for the table. The property can have one of the following values, which are defined by the GridPagerMode enum:
  • InfiniteScroll: No pages for the table are displayed. A user can only scroll records of the table.
  • NextPrevFirstLast: The Next, Previous, First, and Last links are displayed for the pages of the table. A user can click these links to switch between the pages of the table.
  • Numeric: The page numbers are displayed as links. A user can click these links to switch between the pages of the table.
The following example uses this property.
@gridConfig({
  pagerMode:
    GridPagerMode.NextPrevFirstLast
})
export class FASheetHistory
  extends PXView
pageSize Specifies the maximum number of records on a page if the table is displayed on multiple pages. The following code uses this property.
@gridConfig({
  PageSize: 12
})
export class RecipientProjects
  extends PXView
parameters Specifies the list of parameters passed to the graph. Generally, you do not need to use this property.
preserveSortsAndFilters Iff the value is true, specifies that the current filter and sorted columns should be stored in the session. By default, the value is false.

The following code uses this property.

@gridConfig({
  preserveSortsAndFilters: true
})
export class BPEventHistory 
  extends PXView
preset Specifies a set of settings that define the appearance of the table. The following values, which are defined by the GridPreset enum, are available:
  • Primary
  • PrimaryInquiry
  • Inquiry
  • Details
  • Attributes
  • ShortList
  • Empty

For more information about presets, see Form Layout: Grid Presets.

The following code uses this property.
@gridConfig({
    preset: GridPreset.Primary
})
export class AccountRecords 
  extends PXView
quickFilterFields Defines a set of fields that are used as filters above the table when all records are displayed, such as in the following screenshot.
Figure 1. Quick filters


The following code uses this property.
@gridConfig({
  quickFilterFields:
    ['ClassID', 'Type', 'Description']
})
export class ActivityTypes extends PXView
screenId Specifies the ID of the form for graph creation. Generally, you do not need to use this property.
showBottomBar If the value is false, hides the table footer. For details, see Table Footer. The following code uses this property.
@gridConfig({
  showBottomBar: false
})
export class APDocuments
  extends PXView
showFastFilter

Specifies whether the Search box is displayed and where it is displayed. The following values, which are defined by the GridFastFilterVisibility enum, are available:

  • False: The Search box is not displayed.
  • ToolBar: The Search box is displayed on the table toolbar.
  • FilterBar: The Search box is displayed on the filter bar.

The following code uses this property.

@gridConfig({
  showFastFilter: 
    GridFastFilterVisibility.False
})
export class FieldValue
  extends PXView
showFilterBar

Indicates whether the filter bar should be shown for the table. The property can have one of the following values, which are defined by the GridFilterBarVisibility enum:

  • False
  • Always
  • OnDemand

The following code uses this property.

@gridConfig({
  showFilterBar: 
    GridFilterBarVisibility.False
})
export class FieldValue
  extends PXView
showRowSelectors If the value is true, indicates that the first column, which shows the selected row, should be displayed for the table. The following code uses this property.
@gridConfig({
  showRowSelectors: true
})
export class EMailAccounts
  extends PXView
showTopBar If the value is false, hides the table toolbar. The following code uses this property.
@gridConfig({
  showTopBar: false
})
export class EMailAccounts
  extends PXView
statusField Specifies the name of the column that is displayed in the footer of the table. The following code uses this property.
@gridConfig({
  statusField: "Availability"
})
export class SOLine extends PXView
suppressNoteFiles Hides the Note and File columns from the table. The following code uses this property.
@gridConfig({
  suppressNoteFiles: true
})
export class RecipientProjects
  extends PXView
syncPosition

If the value is true, specifies that the Current record must be synchronized with the record selected in the table.

Tip:

If a form contains a table and the form toolbar includes an action to process a single record that is selected in the table, the action delegate method must have a reference to the selected record in the cache.

To use the Current property of a PXCache object to access the record selected in a table, the Current property must be synchronized with the record selected in the grid. To force the system to provide this synchronization, you have to set the syncPosition property of the gridConfig decorator to true.

The following code uses this property.
@gridConfig({
    syncPosition: true
})
export class FABookBalance
  extends PXView
tabIndex Specifies the index of the table during the navigation with the Tab key. The following code uses this property.
@gridConfig({
  tabIndex: -1
})
export class SOLine extends PXView
topBarItems

Provides configuration of the table toolbar.

The following example configures a menu button for the table toolbar, as shown in the screenshot below.

@gridConfig({
  topBarItems: {
    TestMenu: {
      type: "menu-options",
      index: 1,
      config: {
        images: { 
          normal: "svg:main@external" },
        options: {
          first: {
            text: "First",
            commandName: "First"         
          },
          second: {
            text: "Second",
            commandName: "Second"
          }
        }
      }
    }
  }
})
export class SOLine extends PXView
Figure 2. Menu button
view Specifies the view from which the data should be displayed in the table. Generally, you do not need to use this property.
wrapToolbar

Shows the More button in the table toolbar, as shown in the following screenshot.

Figure 3. The More button


The following code uses this property.
@gridConfig({
    wrapToolbar: true
})
export class SOLine extends PXView

columnConfig Decorator

The following table lists the properties of the TypeScript columnConfig decorator, which is used for configuration of a table.

Property Description
allowCheckAll If set to true, adds a check box in the header of the column, which gives the user the ability to select all check boxes in the column on the page. The following example uses this property.
@columnConfig({
  allowCheckAll: true
})
Selected: PXFieldState;
allowFastFilter

If set to true, includes the field in the list of fields that are used in the fast filter (that is, the search is performed by these fields if a user searches in the table by using the Search box in the table toolbar).

No default value is defined.

If allowFastFilter is false or undefined for all columns, the search box is hidden.

The following code assigns this property.

@columnConfig({ 
  allowFastFilter: true 
})
Status: PXFieldState;
allowFilter If the value is true, adds column filtering in the header of the column. The following example uses this property.
@columnConfig({
  allowFilter: true
})
Type: PXFieldState;
allowFocus If set to true, places the cursor in the column when a new record is added to the table. The following example uses this property.
@columnConfig({
  allowFocus: true
})
Type: PXFieldState;
allowNull If the value is false, prevents the cell value from being cleared. The following example uses this property.
@columnConfig({ 
  allowNull: false 
})
PaymentLeadTime: PXFieldState;
allowResize If the value is false, prevents the resizing of the column. The following example uses this property.
@columnConfig({ 
  allowResize: false 
})
PaymentLeadTime: PXFieldState;
allowShowHide Manages the capability for a user to show or hide the column in the table. (The user can show or hide the column in the Column Configuration dialog box.)

The property can have one of the following values, which are defined by the GridColumnShowHideMode enum:

  • False: The user cannot show or hide the column. The column appears in the table by default.
  • True: The user can show or hide the column. Whether the column appears in the table by default depends on the field state.
  • Server: The possibility to show or hide the column is managed on the server. The user can show or hide the column if the server has set visible: true.
  • Client: The user can show or hide the column. The column appears in the table by default. The server does not manage visibility of the column.

The following code shows an example of the use of this property.

@columnConfig({ 
  allowShowHide: 
    GridColumnShowHideMode.False 
})
OriginalContactID: PXFieldState;
allowSort If the value is false, turns off the capability for a user to sort the values in the column. The following example uses this property.
@columnConfig({ 
  allowSort: false
})
ContactID: PXFieldState;
allowUpdate If the value is true, indicates that a user can update the value in the column. The following example uses this property.
@columnConfig({ 
  allowUpdate: true
})
ContactID: PXFieldState;
captionImage Defines the image that is used for the column header. The image is an SVG icon from the \Content\svg_icons folder of the MYOB Acumatica instance. The following example uses this property.
@columnConfig({ 
  captionImage: "main@Success"
})
ProcessingSucceeded: PXFieldState;
dateMask Defines the date mask for the column, as shown in the following code.
@columnConfig({ 
  dateMask: "dd/mm/yyyy"
})
Date: PXFieldState;
decimals Defines the number of decimal values to be displayed in the column cells. The following example uses this property.
@columnConfig({ decimals: 4})
RatioPerYear: PXFieldState;
displayMode Specifies the display mode for each cell of the column. The display mode, which is defined by the GridColumnDisplayMode enum, can be one of the following:
  • Value (default): The column cell contains the value of the field.
  • Text: If a description is defined for the field, the column cell contains the description of the field.
  • Hint: If a description is defined for the field, the column cell contains both the value of the field and the description of the field.
The following example uses this property.
@columnConfig({
  displayMode: 
    GridColumnDisplayMode.Text
})
EMailAccountID: PXFieldState;
editorConfig Defines the configuration for the control that is used for the cells of the column in inline-edit mode. The following example configures a tree-selector control for the column cells.
@columnConfig({
  editorType: 'qp-tree-selector',
  editorConfig: {
    treeSelectorId: 
      'tree_selector_edWorkgroupID',
    treeConfig: {
      idName: 'WorkgroupID',
      dataMember: '_EPCompanyTree_Tree_',
      description: 'Description',
      idParent: 'Key',
      iconField: 'Icon',
      mode: 'single',
      hideRootNode: true
    },
  }
})
WorkgroupID : PXFieldState;
editorType Specifies the name of the control that is used for the cells of the column in inline-edit mode. The following example defines the qp-formula-editor control for column cells.
@columnConfig({
  editorType: 'qp-formula-editor'
})
SourceField: PXFieldState;
format

Specifies the custom display format for date and numeric columns. For example, you can specify format: "g" if you want to see date and time in a date column.

For the list of possible values, see Standard numeric format strings and Standard date and time format strings in the Microsoft documentation.

The following example uses this property.
@columnConfig({
  format: "g"
})
Date: PXFieldState;
fullState If the value is true, turns on matrix mode for the column. The following code uses this property.
@columnConfig({
  fullState: true
})
Value : PXFieldState;
hideViewLink

Specifies whether the column value should be a link. Every selector control placed in a table becomes a link by default.

You use this property to remove the link, as shown in the following code.
@columnConfig({
  hideViewLink: true
})
LocationID: PXFieldState;
key Specifies the key for unbound columns, such as Notes and Files. The following code uses this property.
@columnConfig({
  key: "valueMapping"
})
Value: PXFieldState;
maxLength Specifies the maximum length of the string in the column. The following code uses this property.
@columnConfig({
  maxLength: 30
})
Value: PXFieldState;
nullText Specifies the value that is displayed if the column value is NULL. The following code uses this property.
@columnConfig({
  nullText: "0.0"
})
Amount: PXFieldState;
suppressExport If the value is true, indicates that the column is not included in the results of the export of the table. The following code uses this property.
@columnConfig({
  suppressExport: true
})
LineNbr: PXFieldState;
textAlign

Specifies the alignment of the values in the column. You can use one of the following values, which are defined in the TextAlign enum:

  • NotSet
  • Left
  • Center
  • Right
  • Justify
The following code uses this property.
@columnConfig({
  textAlign: TextAlign.Center
})
Included: PXFieldState;
textField Specifies explicitly which field should be displayed in the column selector control. The following code uses this property.
@columnConfig({
  textField: "LocalizedDescr"
})
timeMode If the value is true, turns on the time mode for the date and time column. The following code uses this property.
@columnConfig({
  timeMode: true
})
Time: PXFieldState;
toolTip Specifies the tooltip for the column. The following code uses this property.
@columnConfig({
  toolTip: "Email Account"
})
Account: PXFieldState;
type

Specifies the type of the column content. You can use one of the following values, which are defined by the GridColumnType enum:

  • NotSet
  • Icon
  • HyperLink
  • CheckBox

The following code uses this property.

@columnConfig({
  type: GridColumnType.HyperLink
})
ScreenId: PXFieldState;
valueItems Specifies the list of values for the drop-down control in inline-edit mode.
visible

If the value is false, hides the column in the table by default. The following code uses this property. 

@columnConfig({
  visible: false
})
OwnerID: PXFieldState;

Generally, instead of visible: false, you use PXFieldOptions.Hidden in TypeScript, as shown in the following code.

export class Details 
  extends PXView {
  Selected:
    PXFieldState<
      PXFieldOptions.Hidden>;
}

Columns with allowShowHide: GridColumnShowHideMode.False or allowShowHide: GridColumnShowHideMode.Client appear in the table by default.
width Specifies the width of the column. The width is defined in pixels. The following code uses this property.
@columnConfig({ 
  width: 200 
}) 
ExpireDate: PXFieldState;