Column Configuration

Columns are defined declaratively using column child components within the grid. The field property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows.

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn
      field="account"
      header="Account Number"
      ...
    ></IgrGridLiteColumn>
    {/* Additional columns follow */}
  </IgrGridLite>
);

Configuration Based on the Data Source

The grid supports inferring the column configuration based on the provided data source when autoGenerate is set to true. It tries to infer the appropriate field and dataType based on records in the data.

const data: Record[] = [
  { entryId: "1234", source: "https://example.com", ts: 1373521917579 },
  ...
];

return (
  <IgrGridLite data={data} autoGenerate={true}></IgrGridLite>
);

The previous snippet will result in the grid automatically creating columns equivalent to:

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn field="entryId" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="source" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="ts" dataType="number"></IgrGridLiteColumn>
  </IgrGridLite>
);

Useful for a quick render of some data without any additional customizations.

Additional Column Configuration

The column exposes several more properties for customization:

Column Width

By default, the columns have a width of minmax(136px, 1fr) which translates to a minimum width of 136px and maximum of 1 part of the available space in the Grid Lite. This way the columns are fluid and responsive accommodating for changes in the grid width.

To change the width of column, use the width property of the column.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" width="250px"></IgrGridLiteColumn>
  </IgrGridLite>
);

The property accepts valid CSS length units.

Hiding columns

Columns can be hidden/shown by setting the hidden property of the column.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" hidden></IgrGridLiteColumn>
  </IgrGridLite>
);

Column resize

Each column of the Grid Lite can be configured to be resizable by setting the resizable property of the column element.

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" resizable></IgrGridLiteColumn>
  </IgrGridLite>
);

If a column is set to be resizable, you can drag the right size of the column header to either increase/decrease the column width. Double-clicking on the resize area will trigger auto-sizing of the column where it will try set its width according to the largest content of its cells/header.

[!NOTE] Columns with "fluid" widths (fr, %, etc.) can behave erratically when resizing in the grid is performed as they try to accommodate for the new dimensions. Depending on the application scenario, it may be better to use "hard" units so users don't experience layout shifts.

In the sample below you can try out the different column properties and how they reflect in the rendered grid.

Additional Resources

Our community is active and always welcoming to new ideas.

Grid Lite GitHub