Client Mode

In Client Mode, the data is loaded into the grid at once. This is the default mode of the grid. The data is loaded into the grid using the dataProvider prop. There is no need to set the filterPageSortMode prop to FilterPageSortLoadMode.Client as this is the default value.

Unique Identifier

There is very little configuration required to get started with Client Mode. The only thing you need to do is to set the dataProvider prop. The dataProvider has to be an array of objects. Each object represents a row in the grid. These objects need to have a unique identifier. The unique identifier is used to identify the row in the grid. The unique identifier can be set using the uniqueIdentifierOptions prop. Assume you set uniqueIdentifierOptions prop to { useField: "id" }. This means that the grid will look for a field called id in each object and use that as the unique identifier. If you want to use a different field as the unique identifier, you can set the useField prop to the name of the field.

Loading Indicator

The grid has a loading indicator that is displayed when the data is being loaded. The gridOptions prop has a isLoading prop that can be used to set the loading indicator. The isLoading prop is a boolean value. If the value is true, the loading indicator is displayed. If the value is false, the loading indicator is not displayed. Lets see how we can use the isLoading prop to display the loading indicator.

Live Editor

function App() { const [isLoading, setIsLoading] = useState(true); const [data, setData] = useState([]); const columns = [ createColumn("employeeId", "string", "Id"), createColumn("isActive", "boolean", "Active"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; useEffect(() => { setIsLoading(true); const getLineItems = async () => { const data = Employee.getAllEmployees() await new Promise((resolve) => setTimeout(resolve, 3000)); setData(data); setIsLoading(false); }; getLineItems(); }, []); return ( <div> <button onClick={() => setIsLoading(true)}>Show Loading</button> <button onClick={() => setIsLoading(false)}>Hide Loading</button> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: data, uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: false, isLoading }} /> </div> ); }

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("isActive", "boolean", "Active"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
    useEffect(() => {
        setIsLoading(true);
        const getLineItems = async () => {
            const data = Employee.getAllEmployees()
            await new Promise((resolve) => setTimeout(resolve, 3000));
            setData(data);
            setIsLoading(false);
        };
        getLineItems();
    }, []);
  return (
    <div>
        <button onClick={() => setIsLoading(true)}>Show Loading</button>
        <button onClick={() => setIsLoading(false)}>Hide Loading</button>
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: data,
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: false,
        isLoading
      }}
    />
    </div>
  );
}

Result

Loading...

Styling the loading indicator

Below is the css that is used to style the loading indicator.

.ezgrid-dg-skeleton>* {
    display: none !important
}

.ezgrid-dg-skeleton::after {
    content: "";
    width: 100%;
    height: 25px;
    display: flex;
    align-self: center;
    z-index: 1;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), lightgray;
    background-repeat: no-repeat;
    background-size: 50px 100%;
    background-position: 0 0;
    animation: ezgrid-dg-skeleton-shine 1s infinite
}

@keyframes ezgrid-dg-skeleton-shine {
    to {
        background-position: 100% 0, 0 0
    }
}

Customizing CSS

All of these can be customized to fit your needs, just make sure you create a new file and import it after the grid CSS file, and make all your changes in the new file. This way, when you update the grid, your changes will not be overwritten.

Using a custom loading indicator

If you do not want to use the default loading indicator, you can use a custom loading indicator.

Live Editor

function App() { const [isLoading, setIsLoading] = useState(true); const [data, setData] = useState([]); const columns = [ createColumn("employeeId", "string", "Id"), createColumn("isActive", "boolean", "Active"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; useEffect(() => { setIsLoading(true); const getLineItems = async () => { const data = Employee.getAllEmployees() await new Promise((resolve) => setTimeout(resolve, 3000)); setData(data); setIsLoading(false); }; getLineItems(); }, []); return ( <div style={{position:"relative"}}> <button onClick={() => setIsLoading(true)}>Show Loading</button> <button onClick={() => setIsLoading(false)}>Hide Loading</button> {isLoading && <div style={{position:"absolute", top:"45%", left:"45%"}}><Spinner/></div>} <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: data, uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: false, }} /> </div> ); }

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("isActive", "boolean", "Active"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
    useEffect(() => {
        setIsLoading(true);
        const getLineItems = async () => {
            const data = Employee.getAllEmployees()
            await new Promise((resolve) => setTimeout(resolve, 3000));
            setData(data);
            setIsLoading(false);
        };
        getLineItems();
    }, []);
  return (
    <div style={{position:"relative"}}>
        <button onClick={() => setIsLoading(true)}>Show Loading</button>
        <button onClick={() => setIsLoading(false)}>Hide Loading</button>
        {isLoading && <div style={{position:"absolute", top:"45%", left:"45%"}}><Spinner/></div>}
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: data,
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: false,
      }}
    />
    </div>
  );
}

Result

Loading...

Enabling Paging

The grid supports paging. Paging is enabled by setting the enablePaging prop to true. The enablePaging prop is a boolean value. If the value is true, paging is enabled. If the value is false, paging is disabled. Lets see how we can use the enablePaging prop to enable paging.

Live Editor

function App() { const [isLoading, setIsLoading] = useState(true); const [data, setData] = useState([]); const columns = [ createColumn("employeeId", "string", "Id"), createColumn("isActive", "boolean", "Active"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; useEffect(() => { setIsLoading(true); const getLineItems = async () => { const data = Employee.getAllEmployees() await new Promise((resolve) => setTimeout(resolve, 1000)); setData(data); setIsLoading(false); }; getLineItems(); }, []); return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: data, uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFooters: false, enablePaging: true, isLoading }} /> ); }

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("isActive", "boolean", "Active"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
    useEffect(() => {
        setIsLoading(true);
        const getLineItems = async () => {
            const data = Employee.getAllEmployees()
            await new Promise((resolve) => setTimeout(resolve, 1000));
            setData(data);
            setIsLoading(false);
        };
        getLineItems();
    }, []);
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors:[createFilterBehavior({})],
        dataProvider: data,
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFooters: false,
        enablePaging: true,
        isLoading
      }}
    />
  );
}

Result

Loading...

Since we have the enable filters behavior enabled, we can filter the data and see the paging in action. If you perform a global search, you will see that it affects the paging, and the paging is reset to the first page.