Column Width Modes

The grid has 3 column lock modes:

• ColumnWidthMode.Fixed
• ColumnWidthMode.Percent
• ColumnWidthMode.FitToContent

If set to left, the column will be locked to the left and not scroll horizontally. If set to right, the column will be locked to the right and not scroll horizontally. If set to none, the column will scroll horizontally with the rest of the grid.

Note Please note, column width modes behave differently depending on the horizontalScrollMode of the grid.

Note If you are transitioning from the older grids, please note that the new grid does a few things differently. First, the default horizontalScrollMode is set to "on". This means that the grid will scroll horizontally by default. Second, the percent no longer requires that you add up to 100%. Instead, the grid takes the grid width as uses the percent as a ratio of the grid width. For example, if you have a grid with a width of 1000px and you have 3 columns with widths of 25%, 25%, and 10%, the grid will render the first column at 250px, the second column at 250px, and the third column at 100px. This allows you to mix and match the various column width modes.

Horizontal Scroll Mode: on (default)

Let's take a look at an example of how this functions with the default horizontal scroll policy:

Live Editor

function App() { const columns = [ { ...createColumn("firstName", "string", "First Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 25, }, { ...createColumn("lastName", "string", "Last Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 25, }, { ...createColumn("annualSalary", "currency", "Salary"), widthMode: ColumnWidthMode.Fixed, width: 75, },{ ...createColumn("stateCode", "string", "State"), widthMode: ColumnWidthMode.FitToContent, }, createColumn("department", "string", "Department"),{ ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, children: [ {...createColumn("address.city", "string", "City"), width:90}, {...createColumn("address.state", "string", "State"), width:75}, {...createColumn("address.country", "string", "Country"), width:75}, ], }, ]; return ( <div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: true, }} /> </div> ); }

function App() {  
    const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 25,

    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 25,
    },
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      widthMode: ColumnWidthMode.Fixed,
      width: 75,
    },{
      ...createColumn("stateCode", "string", "State"),
      widthMode: ColumnWidthMode.FitToContent,
    },
    createColumn("department", "string", "Department"),{
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      children: [
        {...createColumn("address.city", "string", "City"), width:90},
        {...createColumn("address.state", "string", "State"), width:75},
        {...createColumn("address.country", "string", "Country"), width:75},
      ],
    },
  ];

  return (
<div>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: true,
      }}
    />
</div>
  );
}

Result

Loading...

As you can see, the first name and last name columns are set to percent width mode. The salary column is set to fixed width mode. The state column is set to fit to content mode. The department column is set to default mode. The address column is set to default mode, but it has children that are set to fixed width mode. The first and last name columns are set to 25% width, which means that they will each take up 25% of the grid width. The salary column is set to 75px, which means that it will take up 75px of the grid width. The state column is set to fit to content mode, which means that it will take up the width of the longest value in the column. The department column is set to default mode, which means that it will take up the width defined in Constants.DEFAULT_COLUMN_WIDTH. The address column is set to default mode, but it has children that are set to fixed width mode. The city column is set to 90px, the state column is set to 75px, and the country column is set to 75px. The address column will take up the width of the longest value in the column, but the city, state, and country columns will take up the width that you specify.

Note In this case, the grid did not have to increase the width of any of the columns because the grid width was less than the sum of the column widths. (assuming you dont have a giant monitor!), but lets try to reduce the number of columns and see what happens:

Live Editor

function App() { const columns = [ { ...createColumn("firstName", "string", "First Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 25, }, { ...createColumn("lastName", "string", "Last Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 25, },createColumn("stateCode", "string", "State"), { ...createColumn("annualSalary", "currency", "Salary"), widthMode: ColumnWidthMode.Fixed, width: 90, }, ]; return ( <div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: true, }} /> </div> ); }

function App() {    
    const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 25,

    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 25,
    },createColumn("stateCode", "string", "State"),
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      widthMode: ColumnWidthMode.Fixed,
      width: 90,
    },
  ];

  return (
<div>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: true,
      }}
    />
</div>

  );
}

Result

Loading...

Depending on if you have a regular sized monitor, the state column should have stretched to fill the remaining space. This is because its the only column that is set to default mode. The grid allocated the percent columns, fixed columns, and fit to content columns, but it had to allocate the remaining space to the default columns. This behavior is the same even if the grid is set to horizontal scroll policy "off". Where the behavior differs is when the grid is set to horizontal scroll policy "off" AND there is not enough space to render all of the columns. In this case, the grid will render the columns that are set to fixed width mode, percent width mode, and fit to content mode. The remaining columns will be reduced proportionally to fit the grid width. Let's take a look at an example:

Horizontal Scroll Mode: off

Live Editor

function App() { const columns = [ { ...createColumn("firstName", "string", "First Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 10, }, { ...createColumn("lastName", "string", "Last Name"), widthMode: ColumnWidthMode.Percent, percentWidth: 10, }, { ...createColumn("annualSalary", "currency", "Salary"), widthMode: ColumnWidthMode.Fixed, width: 75, },{ ...createColumn("stateCode", "string", "State"), widthMode: ColumnWidthMode.FitToContent, }, createColumn("department", "string", "Department"),{ ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, children: [ {...createColumn("address.city", "string", "City"), width:90}, {...createColumn("address.state", "string", "State"), width:75}, {...createColumn("address.country", "string", "Country"), width:75}, ], }, ]; return ( <div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: true, horizontalScroll: HorizontalScrollMode.Off, }} /> </div> ); }

function App() {  
    const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 10,

    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      widthMode: ColumnWidthMode.Percent,
      percentWidth: 10,
    },
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      widthMode: ColumnWidthMode.Fixed,
      width: 75,
    },{
      ...createColumn("stateCode", "string", "State"),
      widthMode: ColumnWidthMode.FitToContent,
    },
    createColumn("department", "string", "Department"),{
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      children: [
        {...createColumn("address.city", "string", "City"), width:90},
        {...createColumn("address.state", "string", "State"), width:75},
        {...createColumn("address.country", "string", "Country"), width:75},
      ],
    },
  ];

  return (
<div>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: true,
        horizontalScroll: HorizontalScrollMode.Off,
      }}
    />
</div>
  
    );
}

Result

Loading...

Assuming you have a regular sized monitor that required the grid to shrink some of the columns, you should see First Name at 10% of the grid width, Last Name at 10% of the grid width, the fixed columns at their fixed widths, but it adjusted the department and address.street1 column to fit the remaining space (or shrink to avoid the scrollbar). This is because the department and address.street1 columns are set to default mode. The grid will always allocate or take away the remaining space to/from the default columns.