How to Move the FlexGrid Filter Apply Button in React

Background

Wijmo’s FlexGrid filter editor provides Apply, Cancel, and Clear buttons for managing column filters. By default, the Apply button appears on the left.

You can customize this layout with CSS to move the Apply button to the right, position the Cancel button on the left, and adjust the spacing around the Clear button.

Steps to Complete

1. Import the FlexGrid components and styles.
2. Create a FlexGrid with column filtering.
3. Move the Apply button to the right.
4. Position the Cancel button on the left.
5. Adjust the Clear button’s spacing.

Getting Started

Import the FlexGrid components and styles

import React from 'react';
import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';
import { FlexGridFilter } from '@mescius/wijmo.react.grid.filter';

import '@mescius/wijmo.styles/wijmo.css';
import './App.css';

• The imports provide the grid, column definitions, and column filtering component. Load App.css after the Wijmo stylesheet so your custom button styles take precedence.

Create a FlexGrid with column filtering

const data = [
  { id: 1, country: 'Germany', expenses: 689.45 },
  { id: 2, country: 'UK', expenses: 2103.84 },
  { id: 3, country: 'Japan', expenses: 4622.68 },
  { id: 4, country: 'Italy', expenses: 3156.03 },
  { id: 5, country: 'Greece', expenses: 3557.94 },
];

export default function App() {
  return (
    <FlexGrid
      itemsSource={data}
      autoGenerateColumns={false}
      isReadOnly={true}
    >
      <FlexGridColumn binding="id" header="ID" width={80} />
      <FlexGridColumn binding="country" header="Country" width={160} />
      <FlexGridColumn
        binding="expenses"
        header="Expenses"
        format="n2"
        width={140}
      />

      <FlexGridFilter />
    </FlexGrid>
  );
}

• The grid displays the sample data using explicitly defined columns. Adding FlexGridFilter inside the grid enables the column filter editors. Users can open an editor by clicking a column’s filter icon.

Move the Apply button to the right

.wj-columnfiltereditor [wj-part="btn-apply"] {
  float: right;
}

• This selector targets the Apply button inside the column filter editor. Setting float: right moves the button to the right side of the editor’s button area.

Position the Cancel button on the left

.wj-columnfiltereditor [wj-part="btn-cancel"] {
  float: left;
}

• This rule targets the Cancel button and floats it to the left, arranging it separately from the right-aligned Apply button.

Adjust the Clear button’s spacing

.wj-columnfiltereditor [wj-part="btn-clear"] {
  margin-right: 1.4em;
}

• This rule adds a right margin to the Clear button to improve spacing in the updated layout. Keep all three rules in a global stylesheet so they apply to the filter popup.

With this setup, the FlexGrid filter editor displays the Apply button on the right, the Cancel button on the left, and adjusted spacing around the Clear button. These CSS changes customize the layout while preserving the buttons’ existing functionality.

Happy coding!