Column Sorting

The grid supports two mode of sorting

• Single column sorting
• Multi column sorting

The default is multi column sorting. To enable single column sorting, set the enableMultiColumnSort prop to false on sortOptions prop of the GridOptions interface.

Single column sorting

Live Editor

function App (){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ sortOptions:{ enableMultiColumnSort: false, }, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App  (){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
    
      gridOptions={{
        sortOptions:{
          enableMultiColumnSort: false,
        },
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Notice that the sort number is not visible on the header of the column that is currently sorted. This is because we turned off multi column sorting. The top left sort icon is also not visible. Now, lets contrast this with what the default behavior is.

Multi column sorting

Live Editor

function App (){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("address.street1", "string", "Line 1"), headerOptions: { columnGroupText: "Address"}, children: [ {...createColumn("address.city", "string", "City")}, {...createColumn("address.state", "string", "State")}, {...createColumn("address.country", "string", "Country")}, ], }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App  (){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("address.street1", "string", "Line 1"),
      headerOptions: { columnGroupText: "Address"},
      children: [
        {...createColumn("address.city", "string", "City")},
        {...createColumn("address.state", "string", "State")},
        {...createColumn("address.country", "string", "Country")},
      ],
    },
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Notice that the sort number is visible on the header of the column that is currently sorted. This is because we turned on multi column sorting. The top left sort icon is also visible. Clicking on the sort icon in the top left will add the column to the sort instead of clearing the sort and sorting on the column that was clicked. Additionally, clicking with the control or meta key held down will also add the column to the sort.

Initial sort

For the initial sort, you can set the initialSort prop on the sortOptions prop of the GridOptions interface. This is what this looks like

        sortOptions: ({
            initialSort: new Map([["id",
                {
                    sortColumn: "id",
                    isAscending: true,
                }]]
            )
        }),

As you can see, the initialSort prop is a Map of SortColumn objects. The key of the Map is the sortColumn prop of the SortColumn object. The value of the Map is the SortColumn object itself. The sortColumn prop is the name of the column to sort on. The isAscending prop is a boolean that determines whether the sort is ascending or descending.

To specify mutiple values,

        sortOptions: ({
            initialSort: new Map([["id",
                {
                    sortColumn: "id",
                    isAscending: true,
                    sortIndex: 1,
                }],
                ["firstName",
                {
                    sortColumn: "firstName",
                    isAscending: false,
                    sortIndex: 2,
                }]]
            )
        }),

Lets look at an example of this in action

Live Editor

function App (){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ sortOptions: ({ initialSort: new Map([["employeeId", { sortColumn: "employeeId", isAscending: true, }]] ) }), dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App  (){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        sortOptions: ({
          initialSort: new Map([["employeeId",
              {
                  sortColumn: "employeeId",
                  isAscending: true,
              }]]
          )
      }),
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

And here is what it looks like for multiple columns

Live Editor

function App (){ const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ sortOptions: ({ initialSort: new Map([["lastName", { sortColumn: "lastName", isAscending: true, sortIndex: 1, }], ["firstName", { sortColumn: "firstName", isAscending: false, sortIndex: 2, }]] ) }), dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App  (){
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        sortOptions: ({
          initialSort: new Map([["lastName",
              {
                  sortColumn: "lastName",
                  isAscending: true,
                  sortIndex: 1,
              }],
              ["firstName",
              {
                  sortColumn: "firstName",
                  isAscending: false,
                  sortIndex: 2,
              }]]
          )
      }),
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...