Column Lock Modes

The grid has 3 column lock modes:

• LockMode.None
• LockMode.Left
• LockMode.Right

Note Please note, column lock modes only make sense if the horizontalScrollMode of the grid is set to "on"

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.

Lock Mode Restrictions

Please ensure The grid is wide enough to accommodate the left and right locked columns, otherwise the grid will not render correctly.

• For nested grids, both left and right locked sections are wide enough to accommodate the widest left and right locked columns at each level of the grid.
• This is especially true for mobile devices, where a few columns can easily take up the entire width of the screen.

Let's take a look at an example of a grid with locked columns:

Live Editor

function App() { const [lockMode, setLockMode] = React.useState(LockMode.Left); const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Salary"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"),{ ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, lockMode, children: [ {...createColumn("address.city", "string", "City"), width:90}, {...createColumn("address.state", "string", "State"), width:75}, {...createColumn("address.country", "string", "Country"), width:75}, ], }, ]; return ( <div> <div className="ezgrid-dg-toolbar-section"> <button onClick={() => { setLockMode(LockMode.None); }}>Lock Mode: None</button> <button onClick={() => { setLockMode(LockMode.Left); }}>Lock Mode: Left</button> <button onClick={() => { setLockMode(LockMode.Right); }}>Lock Mode: Right</button> </div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: true, }} /> </div> ); }

function App() {
    const [lockMode, setLockMode] = React.useState(LockMode.Left);
    const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Salary"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),{
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      lockMode,
      children: [
        {...createColumn("address.city", "string", "City"), width:90},
        {...createColumn("address.state", "string", "State"), width:75},
        {...createColumn("address.country", "string", "Country"), width:75},
      ],
    },
  ];

  return (
<div>
    <div className="ezgrid-dg-toolbar-section"> 
        <button onClick={() => {
            setLockMode(LockMode.None);
        }}>Lock Mode: None</button>
        <button onClick={() => {
            setLockMode(LockMode.Left);
        }}>Lock Mode: Left</button>
        <button onClick={() => {
            setLockMode(LockMode.Right);
        }}>Lock Mode: Right</button>
    </div>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: true,
      }}
    />
</div>
  );
}

Result

Loading...

You can also use the API to set the lock mode of a column. Here is an example:

Live Editor

function App() { const apiRef = useRef/*<ApiContext | null>*/(null); const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), createColumn("annualSalary", "currency", "Salary"), createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"),{ ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, lockMode:LockMode.Left, children: [ {...createColumn("address.city", "string", "City"), width:90}, {...createColumn("address.state", "string", "State"), width:75}, {...createColumn("address.country", "string", "Country"), width:75}, ], }, ]; return ( <div> <div className="ezgrid-dg-toolbar-section"> <button onClick={() => { if(!apiRef.current) return; apiRef.current.api.setLockMode("address.street1", LockMode.None); }}>Lock Mode: None</button> <button onClick={() => { if(!apiRef.current) return apiRef.current.api.setLockMode("address.street1", LockMode.Left); }}>Lock Mode: Left</button> <button onClick={() => { if(!apiRef.current) return apiRef.current.api.setLockMode("address.street1", LockMode.Right); }}>Lock Mode: Right</button> </div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, eventBus: { onApiContextReady: (ctx) => { apiRef.current = ctx; }, }, }} /> </div> ); }

function App() {  
    const apiRef = useRef/*<ApiContext | null>*/(null);
    const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    createColumn("annualSalary", "currency", "Salary"),
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),{
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      lockMode:LockMode.Left,
      children: [
        {...createColumn("address.city", "string", "City"), width:90},
        {...createColumn("address.state", "string", "State"), width:75},
        {...createColumn("address.country", "string", "Country"), width:75},
      ],
    },
        
  ];

  return (
<div>
    <div className="ezgrid-dg-toolbar-section"> 
        <button onClick={() => {
            if(!apiRef.current) return;
            apiRef.current.api.setLockMode("address.street1", LockMode.None);
        }}>Lock Mode: None</button>
        <button onClick={() => {
            if(!apiRef.current) return
            apiRef.current.api.setLockMode("address.street1", LockMode.Left);
        }}>Lock Mode: Left</button>
        <button onClick={() => {
            if(!apiRef.current) return
            apiRef.current.api.setLockMode("address.street1", LockMode.Right);
        }}>Lock Mode: Right</button>
    </div>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        eventBus: {
            onApiContextReady: (ctx) => {
                apiRef.current = ctx;
            },
        },
      }}
    />
</div>

    );
    }

Result

Loading...

tip

Although the two examples above do the same thing, there is a difference in the way the API is used. In the first example, the lock mode is set on the column definition. In the second example, the lock mode is set on the column after the grid has been rendered. In the second example, you are emulating the user clicking on the column header to change the lock mode. The grid internally stores all the actions that the user performs. When the grid is rendered, it will apply the actions that the user performed. This is the same mechanism that is used to apply the sort order, filter, and other actions that the user performs, and replay those actions when the user restores their saved settings.

Column lock modes are also supported in nested grids. Here is an example in action:

• Nested Grids
• Groouped Grids
• Level Renderers

See it in action

For each of the example above, you should see a View Source Link that will take you to the code for that example.