Server Mode

In Server Mode mode, the data is loaded in chunks as the user interacts with the grid. This mode is useful when the data is too large to load into the grid at once. The data is loaded into the grid using the serverInfo prop.

The filterPageSortMode prop is used to specify the mode of the grid. The default value is FilterPageSortLoadMode.Client. To enable Server Mode mode, set the value to FilterPageSortLoadMode.Server.

For hierarchical data, there is also the itemLoadMode prop. The default value is FilterPageSortLoadMode.Client. To enable Server Mode mode, set the value to FilterPageSortLoadMode.Server.

We will learn more about these props and how to use them in the next section.

Server Mode Example

Lets now see how to use the serverInfo prop to load data into the grid in Server Mode mode.

Live Editor

function App() { const apiContext = useRef(/* <ApiContext | null> */ null); const [serverInfo, setServerInfo] = useState /* <ServerInfo> */(); const [filterPageSortArgs, setFilterPageSortArgs] = useState /* <FilterPageSortArguments> */(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { setFilterPageSortArgs({ filterValues: [], globalFilter: "", pagination: { pageSize: GRID_CONSTANTS.DEFAULT_PAGE_SIZE, currentPage: 1, }, }); }, []); useEffect(() => { if (!filterPageSortArgs) return; getServerData(filterPageSortArgs); }, [filterPageSortArgs]); const getServerData = async ( filterPageSortArgs /* : FilterPageSortArguments */ ) => { const { filterValues, globalFilter, pagination, sorts } = filterPageSortArgs; setIsLoading(true); const cols = apiContext.current.api.getFlatColumns(); const data = await getPagedData( filterValues || [], globalFilter || "", pagination || { pageSize: 50, currentPage: 1, }, sorts, serverInfo ? serverInfo.filterDistinctValues : undefined, cols .filter( (col) => col.filterOptions && col.filterOptions.filterComboBoxBuildFromGrid ) .map((col) => col.dataField) || [], cols .filter((col) => col.footerOptions && col.footerOptions.footerOperation) .map((col) => { return { ...col.footerOptions, column: col.dataField, }; }) || [] ); setIsLoading(false); setServerInfo(data); }; const columns = [ createColumn("id", "string", "Id"), createColumn("invoice.invoiceDate", "date", "Invoice Date"), createColumn("lineItemAmount", "currency", "Amount"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ isLoading, dataProvider: serverInfo ? serverInfo.currentPageData || [] : [], filterPageSortMode: FilterPageSortLoadMode.Server, uniqueIdentifierOptions: { useField: "id", }, serverInfo, eventBus: { onApiContextReady: (ctx) => { apiContext.current = ctx; }, onFilterPageSortChanged: (args /* : FilterPageSortArguments */) => { setFilterPageSortArgs(args); }, }, columns, behaviors: [createFilterBehavior({ clearSelectionOnFilter: true })], enablePaging: true, sortOptions: { initialSort: new Map([ [ "id", { sortColumn: "id", isAscending: true, }, ], ]), }, }} ></ReactDataGrid> ); }

function App() {
  const apiContext = useRef(/* <ApiContext | null> */ null);

  const [serverInfo, setServerInfo] = useState /* <ServerInfo> */();
  const [filterPageSortArgs, setFilterPageSortArgs] =
    useState /* <FilterPageSortArguments> */();
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setFilterPageSortArgs({
      filterValues: [],
      globalFilter: "",
      pagination: {
        pageSize: GRID_CONSTANTS.DEFAULT_PAGE_SIZE,
        currentPage: 1,
      },
    });
  }, []);

  useEffect(() => {
    if (!filterPageSortArgs) return;
    getServerData(filterPageSortArgs);
  }, [filterPageSortArgs]);

  const getServerData = async (
    filterPageSortArgs /* : FilterPageSortArguments */
  ) => {
    const { filterValues, globalFilter, pagination, sorts } =
      filterPageSortArgs;
    setIsLoading(true);
    const cols = apiContext.current.api.getFlatColumns();

    const data = await getPagedData(
      filterValues || [],
      globalFilter || "",
      pagination || {
        pageSize: 50,
        currentPage: 1,
      },
      sorts,
      serverInfo ? serverInfo.filterDistinctValues : undefined,
      cols
        .filter(
          (col) =>
            col.filterOptions && col.filterOptions.filterComboBoxBuildFromGrid
        )
        .map((col) => col.dataField) || [],
      cols
        .filter((col) => col.footerOptions && col.footerOptions.footerOperation)
        .map((col) => {
          return {
            ...col.footerOptions,
            column: col.dataField,
          };
        }) || []
    );

    setIsLoading(false);
    setServerInfo(data);
  };

  const columns = [
    createColumn("id", "string", "Id"),
    createColumn("invoice.invoiceDate", "date", "Invoice Date"),
    createColumn("lineItemAmount", "currency", "Amount"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        isLoading,
        dataProvider: serverInfo ? serverInfo.currentPageData || [] : [],
        filterPageSortMode: FilterPageSortLoadMode.Server,
        uniqueIdentifierOptions: {
          useField: "id",
        },
        serverInfo,
        eventBus: {
          onApiContextReady: (ctx) => {
            apiContext.current = ctx;
          },
          onFilterPageSortChanged: (args /* : FilterPageSortArguments */) => {
            setFilterPageSortArgs(args);
          },
        },
        columns,
        behaviors: [createFilterBehavior({ clearSelectionOnFilter: true })],
        enablePaging: true,
        sortOptions: {
          initialSort: new Map([
            [
              "id",
              {
                sortColumn: "id",
                isAscending: true,
              },
            ],
          ]),
        },
      }}
    ></ReactDataGrid>
  );
}

Result

Loading...

So there are a few things to note here:

• The serverInfo prop is used to load data into the grid. The serverInfo prop is of type ServerInfo. The ServerInfo type is defined as follows:

/**
 * ServerInfo is used to pass information from the server to the grid.
 * This is used in conjunction with filterPageSortLoadMode and itemLoadMode
 * Please see https://flexicious.github.io/react-data-grid?example=Server_Paging for an example.
 * and https://flexicious.github.io/react-data-grid?example=Nested_Lazy_Load_Grid for an example.
 */
export interface ServerInfo {
  currentPageData?: unknown[];
  pagination?: Pagination;
  filterDistinctValues?: Map<string, NameValue[]>;
  footerCalculations?: Map<string, string>;
  childrenMap?: Map<string, unknown[]>;
  dataForExport?: unknown[];
}

• The filterPageSortMode prop is used to specify the mode of the grid. The default value is FilterPageSortLoadMode.Client. To enable Server Mode mode, set the value to FilterPageSortLoadMode.Server.

• The eventBus prop is used to listen to events from the grid. The onFilterPageSortChanged event is used to listen to changes in the grid. The FilterPageSortArguments type is defined as follows:

/***
 * This interface is used primarily in server side pagination, sorting, and filtering.
 * It is used to pass the filter values, global filter value, pagination, sort info, and expansion info to the server.
 * The server can use this information to return the data to the grid.
 * Please see https://github.com/flexicious/react-data-grid/tree/master/apps/dashboard/src/app/examples/server-paging.tsx for an example.
 */
export interface FilterPageSortArguments {
  /**
   * A list of filter values. The filter values contain the column unique identifier, the filter value, and the filter operation.
   */
  filterValues?: ServerFilterValue[];
  /**
   * The global filter value. The global filter value is used to filter all the columns. Its only used when the global filter is enabled using
   * the toolbarOptions property.
   */
  globalFilter?: string;
  /**
   * The global filter tree. The global filter is used to construct a complex logical query to filter the data. Its only used when the global filter tree
   *  is enabled using the toolbarOptions property.
   * */
  globalFilterTree?: Filter;
  /**
   * The pagination info. The pagination info contains the page number, the page size, and the total number of records.
   */
  pagination?: PaginationRequest;
  /**
   * The sort info. The sort info contains the column unique identifier, the sort direction, and the sort priority.
   * The sort priority is used to define the order in which the columns are sorted.
   */
  sorts?: Map<string, SortInfo>;
  /**
   * The expansion info. The expansion info contains the row unique identifier, the expansion state, and the expansion level.
   */
  expansion?: Expansion;
}

As you can see, the grid does depend on the server to provide the data. The server is expected to return the following information:

• The current page data
• The pagination information
• The filter distinct values
• The footer calculations
• The children map (only for hierarchical grids)

This information is then passed to the grid using the serverInfo prop. This is then used to render pagination, filter dropdowns, footer values, and child rows (only for hierarchical grids). Logically speaking, the grid is not aware of the data. It is the responsibility of the server to provide the data to the grid. Because the grid does not have all the data, it cannot perform any operations on the data. So for all filtering, sorting, pagination, the grid is dependent on the server to provide the data.

Server Side Implementations

We have a few examples that demonstrate how to implement server side pagination, sorting, and filtering in the following technologies:

• NodeJS (With Express)
• Java (With Spring Boot)
• .NET (With ASP.NET Core)
• PHP Please contact us if you need help implementing server side pagination, sorting, and filtering in your technology of choice. :::

Additional Examples

There is an example of advanced server side interactions here here The example demonstrates how to implement server side pagination, sorting, filtering, distinct values, and footer calculations. :::

Lazy Loading Hierarchical Data

So far, we have only discussed how to implement server side pagination, sorting, and filtering. But what if we want to implement lazy loading for hierarchical data? The grid supports lazy loading for hierarchical data. The grid will only load the child rows when the user expands the row. The grid will then send a request to the server to load the child rows. The server is expected to return the child rows.

The following example demonstrates how to implement lazy loading for hierarchical data:

Live Editor

function App() { const [isLoading, setIsLoading] = useState(true); const [data, setData] = useState([]); const [serverInfo, setServerInfo] = useState( /* <ServerInfo> */ { childrenMap: new Map(), } ); const columns = [ { ...createColumn("id"), headerText: "ID", enableHierarchy: true, }, createColumn("legalName", "string", "Name"), ]; useEffect(() => { setIsLoading(true); const getOrgs = async () => { const orgs = await FlexiciousMockGenerator.instance().getFlatOrgList(); await new Promise((resolve) => setTimeout(resolve, 1000)); setData(orgs); setIsLoading(false); }; getOrgs(); }, []); const getDealsForOrg = async ( orgId /* : string */ ) /* : Promise<unknown[]> */ => { const allOrgs = FlexiciousMockGenerator.instance().getDeepOrgList(); const org = allOrgs.find((item) => item.id === orgId); await new Promise((resolve) => setTimeout(resolve, 1000)); return org.deals || []; }; const getServerData = async (row /* : RowPositionInfo */) => { setIsLoading(true); if (row.level === 1) { //we are an org, we need its deals const orgId = row.data /* as Organization */.id; const deals = await getDealsForOrg(orgId); const childrenMap = serverInfo ? serverInfo.childrenMap || new Map() : new Map(); childrenMap.set(orgId.toString(), deals); setServerInfo({ ...serverInfo, }); } setIsLoading(false); }; return ( <div style={{ position: "relative" }}> {isLoading && ( <div style={{ position: "absolute", top: "45%", left: "45%" }}> <Spinner /> </div> )} <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors: [createFilterBehavior({})], dataProvider: data, serverInfo, uniqueIdentifierOptions: { useField: "id", }, eventBus: { onItemLoadRequested: getServerData, }, nextLevel: { childrenField: "deals", itemLoadMode: FilterPageSortLoadMode.Server, }, columns, enableFooters: false, }} /> </div> ); }

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);
  const [serverInfo, setServerInfo] = useState(
    /* <ServerInfo> */ {
      childrenMap: new Map(),
    }
  );
  const columns = [
    {
      ...createColumn("id"),
      headerText: "ID",
      enableHierarchy: true,
    },
    createColumn("legalName", "string", "Name"),
  ];

  useEffect(() => {
    setIsLoading(true);
    const getOrgs = async () => {
      const orgs = await FlexiciousMockGenerator.instance().getFlatOrgList();
      await new Promise((resolve) => setTimeout(resolve, 1000));
      setData(orgs);
      setIsLoading(false);
    };
    getOrgs();
  }, []);

  const getDealsForOrg = async (
    orgId /* : string */
  ) /* : Promise<unknown[]>  */ => {
    const allOrgs = FlexiciousMockGenerator.instance().getDeepOrgList();
    const org = allOrgs.find((item) => item.id === orgId);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return org.deals || [];
  };
  const getServerData = async (row /* : RowPositionInfo */) => {
    setIsLoading(true);
    if (row.level === 1) {
      //we are an org, we need its deals
      const orgId = row.data /*  as Organization */.id;
      const deals = await getDealsForOrg(orgId);
      const childrenMap = serverInfo
        ? serverInfo.childrenMap || new Map()
        : new Map();
      childrenMap.set(orgId.toString(), deals);
      setServerInfo({
        ...serverInfo,
      });
    }
    setIsLoading(false);
  };

  return (
    <div style={{ position: "relative" }}>
      {isLoading && (
        <div style={{ position: "absolute", top: "45%", left: "45%" }}>
          <Spinner />
        </div>
      )}
      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
          behaviors: [createFilterBehavior({})],
          dataProvider: data,
          serverInfo,
          uniqueIdentifierOptions: {
            useField: "id",
          },
          eventBus: {
            onItemLoadRequested: getServerData,
          },
          nextLevel: {
            childrenField: "deals",
            itemLoadMode: FilterPageSortLoadMode.Server,
          },
          columns,
          enableFooters: false,
        }}
      />
    </div>
  );
}

Result

Loading...

Additional Examples

There is an example of advanced server side interactions here here