Controlled data source + server side fetching about reactdatagrid HOT 12 CLOSED

{
  data: [],
  getData: () => []
}

const columns = [...];

const App = () => {
  const [data, setData] = useState([]);
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(false);

  const dataSource = useMemo(() => ({
    data,
    count,
    loadData: ({ skip, sortInfo, limit }) => {
  return fetch(DATASET_URL + '?skip=' + skip + '&limit=' + limit + '&sortInfo='+JSON.stringify(sortInfo))
    .then(response => {
      const totalCount = response.headers.get('X-Total-Count');
      response.json().then((data) => {
        setData(prevData => [...prevData, ...data]);
        setCount(parseInt(totalCount));
      });
    })
}
  }), [data, count])

  return (
    <div>
      <h3>Live pagination example - infinite loading, 50 per page</h3>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        columns={columns}
        pagination
        livePagination
        dataSource={dataSource}
        onLoadingChange={setLoading}
      />
    </div>
  );
}

const dataSource: TypeDataSource = async ({ skip, limit }) => {
  return {
    data: await fetchMockData({ skip, limit }),
    count: 1000
  };
};

const SyncedDataSource = () => {
  const [data, setData] = useState<any[]>([]);
  const [count, setCount] = useState<number>(0);
  const [loading, setLoading] = useState(false);
  const [
    gridRef,
    setGridRef
  ] = useState<MutableRefObject<TypeComputedProps | null> | null>(null);

  useEffect(() => {
    if (gridRef?.current && !isEqual(data, gridRef.current.data)) {
      gridRef.current.setOriginalData(data);
    }
  }, [gridRef, data]);

  return (
    <>
      <Box padding="space1" display="flex" alignItems="center" gap="space1">
        <SecondaryButton
          onClick={() => {
            setData((prevData) => prevData.slice(1, prevData.length));
          }}
        >
          Delete First Row (External)
        </SecondaryButton>
        <SecondaryButton
          onClick={() => {
            setData((prevData) => {
              const [first, ...rest] = prevData;

              return [{ ...first, title: uniqueId('Edit ') }, ...rest];
            });
          }}
        >
          Edit First Row (External)
        </SecondaryButton>
        <SecondaryButton
          onClick={() => {
            gridRef?.current?.setOriginalData([]);
            gridRef?.current?.setSkip?.(0);
          }}
        >
          Reset
        </SecondaryButton>
        <Box flex={1}>
          <Text align="right" bold>
            Showing {data.length} out of {count} Records
          </Text>
        </Box>
      </Box>
      <ReactDataGrid
        onReady={setGridRef}
        columns={columns}
        dataSource={dataSource}
        loading={loading}
        onLoadingChange={(loading: boolean) => {
          if (gridRef?.current && !loading) {
            setData(gridRef.current.data);
            setCount(gridRef.current.count);
          }

          setLoading(loading);
        }}
        pagination
        livePagination
      />
    </>
  );
};

<ReactDataGrid
  onReady={setGridRef}
  columns={columns}
  dataSource={dataSource}
  loading={loading}
  onLoadingChange={setLoading}
  onDataSourceChange={({ data, count }) => {
    setData(data);
    setCount(count);
  }}
  pagination
  livePagination
/>