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.

    <igx-grid-lite [data]="data">
  <igx-grid-lite-column
    field="account"
    header="Account Number"
    ...
  ></igx-grid-lite-column>
  <!-- Additional columns -->
</igx-grid-lite>

    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 },
  ...
];

    <igx-grid-lite [autoGenerate]="true" [data]="data"></igx-grid-lite>

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

    <igx-grid-lite [data]="data">
  <igx-grid-lite-column field="entryId" dataType="string"></igx-grid-lite-column>
  <igx-grid-lite-column field="source" dataType="string"></igx-grid-lite-column>
  <igx-grid-lite-column field="ts" dataType="number"></igx-grid-lite-column>
</igx-grid-lite>

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

    Note

    This is a one-time operation which is executed when the grid is initially added to the DOM. Passing an empty data source or having a late bound data source (such as a HTTP request) will usually result in empty column configuration for the grid. This property is ignored if any existing column configuration already exists in the grid. See the data binding topic for additional information on auto-generating the column configuration based on the data source.

    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.

    <igx-grid-lite-column field="price" width="250px"></igx-grid-lite-column>

    The property accepts valid CSS length units.

    Hiding Columns

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

    <igx-grid-lite-column field="price" hidden></igx-grid-lite-column>

    Column Resize

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

    <igx-grid-lite-column field="price" resizable></igx-grid-lite-column>

    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.