diff --git a/packages/dx-grid-core/src/index.ts b/packages/dx-grid-core/src/index.ts
index d28079439d..2cdc0f50fd 100644
--- a/packages/dx-grid-core/src/index.ts
+++ b/packages/dx-grid-core/src/index.ts
@@ -186,7 +186,26 @@ export { getGroupCellTargetIndex } from './utils/group-panel';
 
 /** @internal */
 export {
-  getCollapsedGrid, TABLE_STUB_TYPE, getColumnWidthGetter,
+  getCollapsedGrid,
+  getCollapsedGrids,
+  getColumnsVisibleBoundary,
+  getRowsVisibleBoundary,
+  getColumnsRenderBoundary,
+  getRowsRenderBoundary,
+  getColumnWidthGetter,
+  TABLE_STUB_TYPE,
 } from './utils/virtual-table';
 
+/** @internal */
+export * from './plugins/virtual-table/computeds';
+/** @internal */
+export * from './plugins/virtual-table/helpers';
+
+/** @internal */
+export * from './plugins/virtual-table-state/computeds';
+/** @internal */
+export * from './plugins/virtual-table-state/utils';
+/** @internal */
+export * from './plugins/virtual-table-state/helpers';
+
 export * from './types';
diff --git a/packages/dx-grid-core/src/plugins/table/computeds.ts b/packages/dx-grid-core/src/plugins/table/computeds.ts
index 4608074e71..3d0a2e93a2 100644
--- a/packages/dx-grid-core/src/plugins/table/computeds.ts
+++ b/packages/dx-grid-core/src/plugins/table/computeds.ts
@@ -19,13 +19,16 @@ export const tableColumnsWithDataRows: PureComputed<[any[], GridColumnExtension[
   };
 });
 
-export const tableRowsWithDataRows: PureComputed<[Row[], GetRowIdFn]> = (rows, getRowId) => (
-  !rows.length
+export const tableRowsWithDataRows: PureComputed<[Row[], GetRowIdFn, number]> = (
+  rows, getRowId, isRemoteRowsLoading,
+) => (
+  !rows.length && !isRemoteRowsLoading
     ? [{ key: TABLE_NODATA_TYPE.toString(), type: TABLE_NODATA_TYPE }]
-    : rows.map((row) => {
+    : rows.map((row, dataIndex) => {
       const rowId = getRowId(row);
       return {
         row,
+        // dataIndex,
         rowId,
         type: TABLE_DATA_TYPE,
         key: `${TABLE_DATA_TYPE.toString()}_${rowId}`,
diff --git a/packages/dx-grid-core/src/plugins/table/helpers.ts b/packages/dx-grid-core/src/plugins/table/helpers.ts
index feabbc0019..d558b57ae8 100644
--- a/packages/dx-grid-core/src/plugins/table/helpers.ts
+++ b/packages/dx-grid-core/src/plugins/table/helpers.ts
@@ -2,6 +2,7 @@ import { TABLE_DATA_TYPE, TABLE_NODATA_TYPE } from './constants';
 import {
   IsSpecificCellFn, IsSpecificRowFn, TableRow, TableColumn,
 } from '../../types';
+import { TABLE_STUB_TYPE } from '../../utils/virtual-table';
 
 export const isDataTableCell: IsSpecificCellFn = (
   tableRow, tableColumn,
@@ -14,3 +15,6 @@ export const isNoDataTableRow: IsSpecificRowFn = tableRow => tableRow.type === T
 export const isNoDataTableCell: IsSpecificCellFn<TableColumn, TableColumn[]> = (
   tableColumn, tableColumns,
 ) => tableColumns.indexOf(tableColumn as any) === 0;
+export const isStubTableCell: IsSpecificRowFn = tableRow => (
+  tableRow.type === TABLE_STUB_TYPE
+);
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.test.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.test.ts
new file mode 100644
index 0000000000..644f5fd25a
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.test.ts
@@ -0,0 +1,29 @@
+import { virtualRowsWithCache } from './computeds';
+import { mergeRows } from './helpers';
+import { createVirtualRows, createInterval } from './test-utils';
+
+jest.mock('./helpers', () => ({
+  mergeRows: jest.fn(),
+}));
+
+describe('VirtualTableState computeds', () => {
+  describe('#virtualRowsWithCache', () => {
+    it('should call mergeRows with correct parameters', () => {
+      const rowsInterval = createInterval(20, 30);
+      const cacheInterval = createInterval(15, 25);
+      const { skip, rows } = createVirtualRows(rowsInterval);
+      const cache = createVirtualRows(cacheInterval);
+
+      virtualRowsWithCache(skip, rows, cache);
+
+      expect(mergeRows).toHaveBeenCalledWith(
+        { start: 20, end: 30 },
+        { start: 15, end: 25 },
+        rows,
+        cache.rows,
+        20,
+        15,
+      );
+    });
+  });
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.ts
new file mode 100644
index 0000000000..162af4ed86
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/computeds.ts
@@ -0,0 +1,14 @@
+import { mergeRows } from './helpers';
+import { intervalUtil } from './utils';
+import { VirtualRowsWithCacheFn, PlainRowsFn, LoadedRowsStartFn } from '../../types';
+
+export const virtualRowsWithCache: VirtualRowsWithCacheFn = (skip, rows, cache) => {
+  const rowsInterval = intervalUtil.getRowsInterval({ skip, rows });
+  const cacheInterval = intervalUtil.getRowsInterval(cache);
+
+  return mergeRows(rowsInterval, cacheInterval, rows, cache.rows, skip, cache.skip);
+};
+
+export const plainRows: PlainRowsFn = virtualRows => virtualRows.rows;
+
+export const loadedRowsStart: LoadedRowsStartFn = virtualRows => virtualRows.skip;
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.test.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.test.ts
new file mode 100644
index 0000000000..fc475f6eff
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.test.ts
@@ -0,0 +1,321 @@
+import {
+  mergeRows, calculateRequestedRange, rowToPageIndex,
+  recalculateBounds, trimRowsToInterval,
+} from './helpers';
+import { intervalUtil } from './utils';
+import { createInterval, generateRows, createVirtualRows } from './test-utils';
+
+describe('VirtualTableState helpers', () => {
+  describe('#mergeRows', () => {
+    describe('nonoverlapping', () => {
+      it('should merge rows when cache is before rows', () => {
+        const cacheInterval = createInterval(10, 14);
+        const rowsInterval = createInterval(14, 18);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 14, 10)).toEqual({
+          skip: 10,
+          rows: [
+            ...cache, ...rows,
+          ],
+        });
+      });
+
+      it('should merge rows when rows are before cache', () => {
+        const cacheInterval = createInterval(14, 18);
+        const rowsInterval = createInterval(10, 14);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 10, 14)).toEqual({
+          skip: 10,
+          rows: [
+            ...rows, ...cache,
+          ],
+        });
+      });
+    });
+
+    describe('overlapping', () => {
+      it('should merge rows when cache is before rows', () => {
+        const cacheInterval = createInterval(10, 20);
+        const rowsInterval = createInterval(15, 25);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 15, 10)).toEqual({
+          skip: 10,
+          rows: [
+            ...cache.slice(0, 5), ...rows,
+          ],
+        });
+      });
+
+      it('should merge rows when rows are before cache', () => {
+        const cacheInterval = createInterval(15, 25);
+        const rowsInterval = createInterval(10, 20);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 10, 15)).toEqual({
+          skip: 10,
+          rows: [
+            ...rows, ...cache.slice(5),
+          ],
+        });
+      });
+
+      it('should merge rows when cache contains rows', () => {
+        const cacheInterval = createInterval(10, 30);
+        const rowsInterval = createInterval(15, 25);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 15, 10)).toEqual({
+          skip: 10,
+          rows: [
+            ...cache.slice(0, 5), ...rows, ...cache.slice(15),
+          ],
+        });
+      });
+
+      it('should merge rows when rows contain cache', () => {
+        const cacheInterval = createInterval(15, 25);
+        const rowsInterval = createInterval(10, 30);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 10, 15)).toEqual({
+          skip: 10,
+          rows,
+        });
+      });
+    });
+
+    describe('empty interval', () => {
+      it('should merge rows when cache is empty', () => {
+        const cacheInterval = intervalUtil.empty;
+        const rowsInterval = createInterval(10, 20);
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 10, 15)).toEqual({
+          skip: 10,
+          rows,
+        });
+      });
+
+      it('should merge rows when rows are empty', () => {
+        const cacheInterval = createInterval(10, 20);
+        const rowsInterval = intervalUtil.empty;
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 15, 10)).toEqual({
+          skip: 10,
+          rows: cache,
+        });
+      });
+
+      it('should merge rows when both rows and cache are empty', () => {
+        const cacheInterval = intervalUtil.empty;
+        const rowsInterval = intervalUtil.empty;
+        const cache = generateRows(cacheInterval, 'cache');
+        const rows = generateRows(rowsInterval, 'rows');
+
+        expect(mergeRows(rowsInterval, cacheInterval, rows, cache, 15, 10)).toEqual({
+          skip: undefined,
+          rows: [],
+        });
+      });
+    });
+
+    describe('partial merge', () => {
+      it('should merge rows according to intervals', () => {
+        const fullCacheInterval = createInterval(0, 30);
+        const fullRowsInterval = createInterval(20, 50);
+        const cache = generateRows(fullCacheInterval, 'cache');
+        const rows = generateRows(fullRowsInterval, 'rows');
+        const visibleCacheInterval = createInterval(10, 30);
+        const visibleRowsInterval = createInterval(20, 40);
+
+        expect(mergeRows(visibleRowsInterval, visibleCacheInterval, rows, cache, 20, 0)).toEqual({
+          skip: 10,
+          rows: [
+            ...cache.slice(10, 20), ...rows.slice(0, 20),
+          ],
+        });
+      });
+    });
+  });
+
+  describe('#calculateRequestedRange', () => {
+    const pageSize = 100;
+
+    describe('simple cases', () => {
+      it('should caclulate requested range for next page', () => {
+        const loadedInterval = createInterval(100, 400);
+        const newInterval = createInterval(200, 500);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 310, pageSize))
+          .toEqual({ start: 400, end: 500 });
+      });
+
+      it('should caclulate requested range for previous page', () => {
+        const loadedInterval = createInterval(200, 500);
+        const newInterval = createInterval(100, 400);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 310, pageSize))
+          .toEqual({ start: 100, end: 200 });
+      });
+
+      it('should caclulate requested range for next 2 pages', () => {
+        const loadedInterval = createInterval(100, 400);
+        const newInterval = createInterval(400, 700);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 580, pageSize))
+          .toEqual({ start: 500, end: 700 });
+      });
+
+      it('should caclulate requested range for previous 2 pages', () => {
+        const loadedInterval = createInterval(300, 600);
+        const newInterval = createInterval(100, 400);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 270, pageSize))
+          .toEqual({ start: 200, end: 400 });
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should correctly process start of page', () => {
+        const loadedInterval = createInterval(0, 200);
+        const newInterval = createInterval(200, 500);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 300, pageSize))
+          .toEqual({ start: 200, end: 400 });
+      });
+
+      it('should correctly process end of page', () => {
+        const loadedInterval = createInterval(0, 200);
+        const newInterval = createInterval(200, 500);
+
+        expect(calculateRequestedRange(loadedInterval, newInterval, 399, pageSize))
+          .toEqual({ start: 300, end: 500 });
+      });
+    });
+
+    describe('fast scroll', () => {
+      const loadedInterval = createInterval(200, 500);
+      const newInterval = createInterval(1000, 1300);
+
+      it('should return current and next page if page middle index passed', () => {
+        expect(calculateRequestedRange(loadedInterval, newInterval, 1170, pageSize))
+          .toEqual({ start: 1100, end: 1300 });
+      });
+
+      it('should return current and previous page if page middle index is not passed', () => {
+        expect(calculateRequestedRange(loadedInterval, newInterval, 1120, pageSize))
+          .toEqual({ start: 1000, end: 1200 });
+      });
+    });
+  });
+
+  describe('#rowToPageIndex', () => {
+    it('should return virtual page index', () => {
+      expect(rowToPageIndex(0, 100)).toBe(0);
+      expect(rowToPageIndex(50, 100)).toBe(0);
+      expect(rowToPageIndex(99, 100)).toBe(0);
+      expect(rowToPageIndex(100, 100)).toBe(1);
+    });
+  });
+
+  describe('#calculateBounds', () => {
+    it('should return boundaries from previous page start to next page end', () => {
+      expect(recalculateBounds(350, 100, 1000)).toEqual({
+        start: 200,
+        end: 500,
+      });
+    });
+
+    it('should correctly process start index of page', () => {
+      expect(recalculateBounds(300, 100, 1000)).toEqual({
+        start: 200,
+        end: 500,
+      });
+    });
+
+    it('should correctly process end index of page', () => {
+      expect(recalculateBounds(299, 100, 1000)).toEqual({
+        start: 100,
+        end: 400,
+      });
+    });
+
+    it('should be bounded below by 0', () => {
+      expect(recalculateBounds(30, 100, 1000)).toEqual({
+        start: 0,
+        end: 200,
+      });
+    });
+
+    it('should be bounded above by total rows count', () => {
+      expect(recalculateBounds(950, 100, 1000)).toEqual({
+        start: 800,
+        end: 1000,
+      });
+    });
+  });
+
+  describe('#trimRowsToInterval', () => {
+    it('should trim right side', () => {
+      const rowsInterval = createInterval(10, 20);
+      const targetInterval = createInterval(5, 15);
+      const virtualRows = createVirtualRows(rowsInterval);
+
+      expect(trimRowsToInterval(virtualRows, targetInterval)).toEqual({
+        skip: 10,
+        rows: [
+          ...virtualRows.rows.slice(0, 5),
+        ],
+      });
+    });
+
+    it('should trim left side', () => {
+      const rowsInterval = createInterval(10, 20);
+      const targetInterval = createInterval(15, 25);
+      const virtualRows = createVirtualRows(rowsInterval);
+
+      expect(trimRowsToInterval(virtualRows, targetInterval)).toEqual({
+        skip: 15,
+        rows: [
+          ...virtualRows.rows.slice(5, 10),
+        ],
+      });
+    });
+
+    it('should trim both sides', () => {
+      const rowsInterval = createInterval(10, 30);
+      const targetInterval = createInterval(15, 25);
+      const virtualRows = createVirtualRows(rowsInterval);
+
+      expect(trimRowsToInterval(virtualRows, targetInterval)).toEqual({
+        skip: 15,
+        rows: [
+          ...virtualRows.rows.slice(5, 15),
+        ],
+      });
+    });
+
+    it('should return empty if target interval does not contain rows', () => {
+      const rowsInterval = createInterval(10, 20);
+      const targetInterval = createInterval(25, 35);
+      const virtualRows = createVirtualRows(rowsInterval);
+
+      expect(trimRowsToInterval(virtualRows, targetInterval)).toEqual({
+        skip: Number.POSITIVE_INFINITY,
+        rows: [],
+      });
+    });
+  });
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.ts
new file mode 100644
index 0000000000..7aa97e8cf6
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/helpers.ts
@@ -0,0 +1,105 @@
+import { intervalUtil } from './utils';
+import {
+  VirtualRows, Row, MergeRowsFn, CalculateRequestedRangeFn, Interval,
+} from '../../types';
+import { PureComputed } from '@devexpress/dx-core';
+
+export const emptyVirtualRows: VirtualRows = {
+  skip: Number.POSITIVE_INFINITY,
+  rows: [],
+};
+
+const pluckSubarray: PureComputed<[Row[], ...number[]]> = (source, sourceStart, left, right) => (
+  source.slice(left - sourceStart, right - sourceStart)
+);
+
+export const mergeRows: MergeRowsFn = (
+  rowsInterval, cacheInterval, rows, cacheRows, rowsStart, cacheStart,
+) => {
+  const breakpoints = [
+    rowsInterval.start, rowsInterval.end,
+    cacheInterval.start, cacheInterval.end,
+  ]
+    .filter(i => 0 <= i && i < Number.POSITIVE_INFINITY)
+    .sort((a, b) => a - b);
+
+  let result: Row[] = [];
+  if (breakpoints.length > 1) {
+    for (let i = 0; i < breakpoints.length - 1; i += 1) {
+      const left = breakpoints[i];
+      const right = breakpoints[i + 1];
+      const chunk = rowsInterval.start <= left && right <= rowsInterval.end
+        ? pluckSubarray(rows, rowsStart, left, right) // rows have higher priority
+        : pluckSubarray(cacheRows, cacheStart, left, right);
+
+      result = result.concat(chunk);
+    }
+  }
+
+  return {
+    skip: breakpoints[0],
+    rows: result,
+  };
+};
+
+export const calculateRequestedRange: CalculateRequestedRangeFn = (
+  loadedInterval, newRange, referenceIndex, pageSize,
+) => {
+  if (Math.abs(loadedInterval.start - newRange.start) >= 2 * pageSize) {
+    const useFirstHalf = referenceIndex % pageSize < pageSize / 2;
+    const start = useFirstHalf
+      ? newRange.start
+      : newRange.start + pageSize;
+    const end = Math.min(newRange.end, start + 2 * pageSize);
+
+    return { start, end };
+  }
+  return intervalUtil.difference(newRange, loadedInterval);
+};
+
+export const rowToPageIndex: PureComputed<[number, number]> = (
+  rowIndex, pageSize,
+) => Math.floor(rowIndex / pageSize);
+
+export const recalculateBounds: PureComputed<[number, number, number], Interval> = (
+  middleIndex, pageSize, totalCount,
+) => {
+  const currentPageIndex = rowToPageIndex(middleIndex, pageSize);
+
+  const prevPageIndex = currentPageIndex - 1;
+  const nextPageIndex = currentPageIndex + 2;
+  const start = Math.max(0, prevPageIndex * pageSize);
+  const end = Math.min(nextPageIndex * pageSize, totalCount);
+
+  return {
+    start,
+    end,
+  };
+};
+
+export const trimRowsToInterval: PureComputed<[VirtualRows, Interval]> = (
+  virtualRows, targetInterval,
+) => {
+  const rowsInterval = intervalUtil.getRowsInterval(virtualRows);
+  const intersection = intervalUtil.intersect(rowsInterval, targetInterval);
+  if (intervalUtil.empty === intersection) {
+    return emptyVirtualRows;
+  }
+
+  const rows = pluckSubarray(
+    virtualRows.rows, virtualRows.skip, intersection.start, intersection.end,
+  );
+
+  return {
+    rows,
+    skip: intersection.start,
+  };
+};
+
+export const getAvailableRowCount: PureComputed<[boolean, number, number, number], number> = (
+  infiniteScroll, newCount, lastCount, totalRowCount,
+) => (
+  infiniteScroll
+    ? Math.max(newCount, lastCount)
+    : totalRowCount
+);
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/test-utils.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/test-utils.ts
new file mode 100644
index 0000000000..8e9f6f8f6a
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/test-utils.ts
@@ -0,0 +1,12 @@
+import { Interval, VirtualRows } from '../../types';
+
+export const createInterval = (start: number, end: number): Interval => ({ start, end });
+export const generateRows = (interval: Interval, type = 'rows') => (
+  Array
+    .from({ length: interval.end - interval.start })
+    .map((_, i) => ({ id: interval.start + i, type }))
+);
+export const createVirtualRows = (interval: Interval): VirtualRows => ({
+  skip: interval.start,
+  rows: generateRows(interval),
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table-state/utils.ts b/packages/dx-grid-core/src/plugins/virtual-table-state/utils.ts
new file mode 100644
index 0000000000..ccf7553970
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table-state/utils.ts
@@ -0,0 +1,60 @@
+import { PureComputed } from '@devexpress/dx-core';
+import { emptyVirtualRows } from './helpers';
+import { Interval, VirtualRows } from '../../types';
+
+const empty: Interval = {
+  start: Number.POSITIVE_INFINITY,
+  end: Number.NEGATIVE_INFINITY,
+};
+
+const getRowsInterval: PureComputed<[VirtualRows], Interval> = r => (
+  r === emptyVirtualRows
+    ? empty
+    : {
+      start: r.skip,
+      end: r.skip + r.rows.length,
+    }
+);
+
+const getLength = (a: Interval) => a.end - a.start;
+
+const intersect = (a: Interval, b: Interval) => {
+  if (a.end < b.start || b.end < a.start) {
+    return empty;
+  }
+
+  return {
+    start: Math.max(a.start, b.start),
+    end: Math.min(a.end, b.end),
+  };
+};
+
+const difference = (a: Interval, b: Interval) => {
+  if (empty === intervalUtil.intersect(a, b)) {
+    return a;
+  }
+
+  if (b.end < a.end) {
+    return {
+      start: b.end,
+      end: a.end,
+    };
+  }
+  if (a.start < b.start) {
+    return {
+      start: a.start,
+      end: b.start,
+    };
+  }
+  return empty;
+};
+
+export const intervalUtil = {
+  empty,
+
+  getRowsInterval,
+  getLength,
+
+  intersect,
+  difference,
+};
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/computeds.test.ts b/packages/dx-grid-core/src/plugins/virtual-table/computeds.test.ts
new file mode 100644
index 0000000000..6349287bd5
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table/computeds.test.ts
@@ -0,0 +1,99 @@
+import { nextPageReferenceIndex } from './computeds';
+import { pageTriggersMeta } from './helpers';
+
+jest.mock('./helpers', () => ({
+  ...require.requireActual('./helpers'),
+  pageTriggersMeta: jest.fn(),
+}));
+
+describe('#nextPageReferenceIndex', () => {
+  afterEach(jest.resetAllMocks);
+
+  const getters = {};
+  const defaultPayload = {
+    viewportTop: 0,
+    estimatedRowHeight: 40,
+    containerHeight: 400,
+  };
+
+  it('should calculate page triggers', () => {
+    pageTriggersMeta.mockImplementationOnce(() => null);
+    const payload = {};
+
+    nextPageReferenceIndex(payload, getters);
+
+    expect(pageTriggersMeta)
+      .toHaveBeenCalledWith(payload, getters);
+  });
+
+  it('should return null if pageTriggers not exist', () => {
+    pageTriggersMeta.mockImplementationOnce(() => null);
+
+    expect(nextPageReferenceIndex(defaultPayload, getters))
+      .toBeNull();
+  });
+
+  it('should return null if none of page trigger is reached', () => {
+    const payload = {
+      ...defaultPayload,
+      viewportTop: 5000,
+    };
+    pageTriggersMeta.mockImplementationOnce(() => ({
+      topTriggerIndex: 100,
+      topTriggerPosition: 3800,
+      bottomTriggerIndex: 200,
+      bottomTriggerPosition: 7800,
+    }));
+
+    expect(nextPageReferenceIndex(payload, getters))
+      .toBeNull();
+  });
+
+  it('should calculate reference index for previous page', () => {
+    const payload = {
+      ...defaultPayload,
+      viewportTop: 3000,
+    };
+    pageTriggersMeta.mockImplementationOnce(() => ({
+      topTriggerIndex: 100,
+      topTriggerPosition: 3800,
+      bottomTriggerIndex: 200,
+      bottomTriggerPosition: 7800,
+    }));
+
+    expect(nextPageReferenceIndex(payload, getters))
+      .toBe(85);
+  });
+
+  it('should calculate reference index for next page', () => {
+    const payload = {
+      ...defaultPayload,
+      viewportTop: 8000,
+    };
+    pageTriggersMeta.mockImplementationOnce(() => ({
+      topTriggerIndex: 100,
+      topTriggerPosition: 3800,
+      bottomTriggerIndex: 200,
+      bottomTriggerPosition: 7800,
+    }));
+
+    expect(nextPageReferenceIndex(payload, getters))
+      .toBe(210);
+  });
+
+  it('should calculate reference index for arbitary page', () => {
+    const payload = {
+      ...defaultPayload,
+      viewportTop: 90000,
+    };
+    pageTriggersMeta.mockImplementationOnce(() => ({
+      topTriggerIndex: 100,
+      topTriggerPosition: 3800,
+      bottomTriggerIndex: 200,
+      bottomTriggerPosition: 7800,
+    }));
+
+    expect(nextPageReferenceIndex(payload, getters))
+      .toBe(2260);
+  });
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/computeds.ts b/packages/dx-grid-core/src/plugins/virtual-table/computeds.ts
new file mode 100644
index 0000000000..3c843021db
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table/computeds.ts
@@ -0,0 +1,66 @@
+import { Getters } from '@devexpress/dx-react-core';
+import {
+  getRowsVisibleBoundary,
+} from '../../utils/virtual-table';
+import { RowsVisibleBoundaryFn } from '../../types';
+import { pageTriggersMeta } from './helpers';
+
+export const getVisibleRowsBounds: RowsVisibleBoundaryFn = (
+  state, getters, estimatedRowHeight, getRowHeight,
+) => {
+  const {
+    viewportTop, containerHeight, headerHeight, footerHeight,
+  } = state;
+  const {
+    loadedRowsStart,
+    bodyRows,
+    headerRows = [],
+    footerRows = [],
+  } = getters;
+
+  return {
+    viewportTop,
+    header: getRowsVisibleBoundary(
+      headerRows, 0, headerHeight,
+      getRowHeight, 0, estimatedRowHeight,
+    ),
+    body: getRowsVisibleBoundary(
+      bodyRows, viewportTop, containerHeight - headerHeight - footerHeight,
+      getRowHeight, loadedRowsStart, estimatedRowHeight,
+    ),
+    footer: getRowsVisibleBoundary(
+      footerRows, 0, footerHeight,
+      getRowHeight, 0, estimatedRowHeight,
+    ),
+  };
+};
+
+export const nextPageReferenceIndex = (
+  payload: any,
+  getters: Getters,
+) => {
+  const triggersMeta = pageTriggersMeta(payload, getters);
+  if (triggersMeta === null) {
+    return null;
+  }
+
+  const {
+    topTriggerPosition, bottomTriggerPosition, topTriggerIndex, bottomTriggerIndex,
+  } = triggersMeta;
+  const { viewportTop, estimatedRowHeight, containerHeight } = payload;
+  const referencePosition = viewportTop + containerHeight / 2;
+
+  const getReferenceIndex = (triggetIndex: number, triggerPosition: number) => (
+    triggetIndex + Math.round((referencePosition - triggerPosition) / estimatedRowHeight)
+  );
+
+  let referenceIndex: number | null = null;
+  if (referencePosition < topTriggerPosition) {
+    referenceIndex = getReferenceIndex(topTriggerIndex, topTriggerPosition);
+  }
+  if (bottomTriggerPosition < referencePosition) {
+    referenceIndex = getReferenceIndex(bottomTriggerIndex, bottomTriggerPosition);
+  }
+
+  return referenceIndex;
+};
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts b/packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts
new file mode 100644
index 0000000000..828995ae81
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table/helpers.test.ts
@@ -0,0 +1,139 @@
+import { pageTriggersMeta } from './helpers';
+
+export const generateArguments = ({
+  viewportTop = 0, visibleRowsStart = 0, visibleRowsEnd = 20,
+  loadedRowsStart = 0, rowsLength = 200,
+}) => ({
+  gridGeometry: {
+    visibleRowBoundaries: {
+      viewportTop,
+      body: {
+        start: visibleRowsStart,
+        end: visibleRowsEnd,
+      },
+    },
+    viewportTop,
+    containerHeight: 400,
+    estimatedRowHeight: 40,
+  },
+  getters: {
+    virtualRows: {
+      skip: loadedRowsStart,
+      rows: Array.from({ length: rowsLength }).map(() => {}),
+    },
+    pageSize: 100,
+  },
+});
+
+describe('#pageTriggersMeta', () => {
+  it('should return null when rows not loaded', () => {
+    const { gridGeometry, getters } = generateArguments({ rowsLength: 0 });
+
+    expect(pageTriggersMeta(gridGeometry, getters))
+      .toBeNull();
+  });
+
+  describe('inside visible range', () => {
+    it('should calculate page triggers when grid is not scrolled', () => {
+      const { gridGeometry, getters } = generateArguments({});
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 0,
+          topTriggerPosition: -200, // 10 rows up
+          bottomTriggerIndex: 100, // next page boundary
+          bottomTriggerPosition: 3800, // 100'th row position in the midlle of viewport
+        });
+    });
+
+    it('should calculate same page triggers when grid is scrolled half a page', () => {
+      const { gridGeometry, getters } = generateArguments({
+        visibleRowsStart: 30,
+        visibleRowsEnd: 50,
+        viewportTop: 1200,
+      });
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 0,
+          topTriggerPosition: -200,
+          bottomTriggerIndex: 100,
+          bottomTriggerPosition: 3800,
+        });
+    });
+
+    it('should consider virtual rows skip', () => {
+      const { gridGeometry, getters } = generateArguments({
+        visibleRowsStart: 230,
+        visibleRowsEnd: 250,
+        viewportTop: 9200,
+        loadedRowsStart: 100,
+        rowsLength: 300,
+      });
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 200, // border between 2 and 3 pages
+          topTriggerPosition: 7800,
+          bottomTriggerIndex: 300, // next page boundary
+          bottomTriggerPosition: 11800,
+        });
+    });
+
+    it('should correctly calculate triggers when only part of loaded rows is visible', () => {
+      const { gridGeometry, getters } = generateArguments({
+        visibleRowsStart: 390,
+        visibleRowsEnd: 410,
+        viewportTop: 15600,
+        loadedRowsStart: 100,
+        rowsLength: 300,
+      });
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 200,
+          topTriggerPosition: 7800,
+          bottomTriggerIndex: 300, // border between 3 and 4 pages
+          bottomTriggerPosition: 11800,
+        });
+    });
+  });
+
+  describe('outside the visible range', () => {
+    it('should calculate page triggers when loaded rows are below viewport', () => {
+      const { gridGeometry, getters } = generateArguments({
+        visibleRowsStart: 200,
+        visibleRowsEnd: 220,
+        viewportTop: 8000,
+        loadedRowsStart: 400,
+        rowsLength: 300,
+      });
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 500,
+          topTriggerPosition: 19800,
+          bottomTriggerIndex: 600,
+          bottomTriggerPosition: 23800,
+        });
+    });
+
+    it('should calculate page triggers when loaded rows are above viewport', () => {
+      const { gridGeometry, getters } = generateArguments({
+        visibleRowsStart: 1000,
+        visibleRowsEnd: 1020,
+        viewportTop: 40000,
+        loadedRowsStart: 400,
+        rowsLength: 300,
+      });
+
+      expect(pageTriggersMeta(gridGeometry, getters))
+        .toEqual({
+          topTriggerIndex: 500,
+          topTriggerPosition: 19800,
+          bottomTriggerIndex: 600,
+          bottomTriggerPosition: 23800,
+        });
+    });
+  });
+});
diff --git a/packages/dx-grid-core/src/plugins/virtual-table/helpers.ts b/packages/dx-grid-core/src/plugins/virtual-table/helpers.ts
new file mode 100644
index 0000000000..ac031828fc
--- /dev/null
+++ b/packages/dx-grid-core/src/plugins/virtual-table/helpers.ts
@@ -0,0 +1,34 @@
+import { PageTriggersMetaFn } from '../../types';
+
+/** how many rows up and down before next page request */
+export const pageTriggersMeta: PageTriggersMetaFn = (
+  { containerHeight, visibleRowBoundaries, estimatedRowHeight },
+  { pageSize, virtualRows },
+) => {
+  const loadedCount = virtualRows.rows.length;
+  if (loadedCount === 0) {
+    return null;
+  }
+
+  const loadedRowsStart = virtualRows.skip;
+  const topTriggerIndex = loadedRowsStart > 0 ? loadedRowsStart + pageSize : 0;
+  const bottomTriggerIndex = loadedRowsStart + loadedCount - pageSize;
+  const bodyBoundaries = visibleRowBoundaries.body;
+  const firstRowIndex = bodyBoundaries.start;
+  const visibleCount = bodyBoundaries.end - bodyBoundaries.start;
+  const middleIndex = firstRowIndex + Math.round(visibleCount / 2);
+
+  const middlePosition = visibleRowBoundaries.viewportTop + containerHeight / 2;
+
+  const topTriggerOffset = (middleIndex - topTriggerIndex) * estimatedRowHeight;
+  const bottomTriggerOffset = (bottomTriggerIndex - middleIndex) * estimatedRowHeight;
+  const topTriggerPosition = middlePosition - topTriggerOffset;
+  const bottomTriggerPosition = middlePosition + bottomTriggerOffset;
+
+  return {
+    topTriggerIndex,
+    topTriggerPosition,
+    bottomTriggerIndex,
+    bottomTriggerPosition,
+  };
+};
diff --git a/packages/dx-grid-core/src/types/index.ts b/packages/dx-grid-core/src/types/index.ts
index 106041792f..33a4fae5d0 100644
--- a/packages/dx-grid-core/src/types/index.ts
+++ b/packages/dx-grid-core/src/types/index.ts
@@ -17,3 +17,4 @@ export * from './summary.types';
 export * from './merge-sort.types';
 export * from './paging.types';
 export * from './column-chooser.types';
+export * from './virtual-table-state.types';
diff --git a/packages/dx-grid-core/src/types/table.types.ts b/packages/dx-grid-core/src/types/table.types.ts
index 1bd646fe14..36d95410a0 100644
--- a/packages/dx-grid-core/src/types/table.types.ts
+++ b/packages/dx-grid-core/src/types/table.types.ts
@@ -15,6 +15,8 @@ export interface TableRow {
   row?: any;
   /** Specifies the table row height. */
   height?: number;
+  /** @internal */
+  dataIndex?: number;
 }
 
 /** Describes properties of a table column that the Table plugin renders. */
diff --git a/packages/dx-grid-core/src/types/virtual-table-state.types.ts b/packages/dx-grid-core/src/types/virtual-table-state.types.ts
new file mode 100644
index 0000000000..ac09265230
--- /dev/null
+++ b/packages/dx-grid-core/src/types/virtual-table-state.types.ts
@@ -0,0 +1,32 @@
+import { PureComputed } from '@devexpress/dx-core';
+import { Row } from '..';
+
+/** @internal */
+export type Interval = {
+  start: number,
+  end: number,
+};
+/** @internal */
+export type VirtualRows = {
+  skip: number,
+  rows: Row[],
+};
+
+/** @internal */
+export type VirtualRowsWithCacheFn = PureComputed<
+  [number, Row[], VirtualRows], VirtualRows
+>;
+
+/** @internal */
+export type PlainRowsFn = PureComputed<[VirtualRows], Row[]>;
+
+/** @internal */
+export type LoadedRowsStartFn = PureComputed<[VirtualRows], number>;
+
+/** @internal */
+export type MergeRowsFn = PureComputed<
+  [Interval, Interval, Row[], Row[], number, number], VirtualRows
+>;
+
+/** @internal */
+export type CalculateRequestedRangeFn = PureComputed<[Interval, Interval, number, number]>;
diff --git a/packages/dx-grid-core/src/types/virtual-table.types.ts b/packages/dx-grid-core/src/types/virtual-table.types.ts
index c4bb1942a4..b6c64a644c 100644
--- a/packages/dx-grid-core/src/types/virtual-table.types.ts
+++ b/packages/dx-grid-core/src/types/virtual-table.types.ts
@@ -1,5 +1,6 @@
-import { TableColumn, TableRow } from './table.types';
 import { PureComputed } from '@devexpress/dx-core';
+import { Getters } from '@devexpress/dx-react-core';
+import { TableColumn, TableRow, GetCellColSpanFn } from './table.types';
 
 /** @internal */
 export type GetColumnWidthFn = PureComputed<[TableColumn, number?], number | null>;
@@ -15,10 +16,19 @@ export type CollapsedCell = { column: Pick<TableColumn, 'key' | 'type'>, colSpan
 type CollapsedRow = TableRow & { cells: any[], height: number };
 
 /** @internal */
-export type VisibleBoundary =  ReadonlyArray<number>;
+export type VisibleBoundary = ReadonlyArray<number>;
+/** @internal */
+export type RowsVisibleBoundary = {
+  start: number;
+  end: number;
+};
+/** @internal */
+export type GridRowsBoundaries = Record<'header' | 'body' | 'footer', RowsVisibleBoundary> & {
+  viewportTop: number; // to anchor a boundary to specific coords
+};
 /** @internal */
 export type GetVisibleBoundaryFn = PureComputed<
-  [ReadonlyArray<any>, number, number, (item: any) => number | null, number],
+  [ReadonlyArray<any>, number, number, (item: any) => number | null, number, number?],
   VisibleBoundary
 >;
 
@@ -36,7 +46,7 @@ export type GetSpanBoundaryFn = PureComputed<
 
 /** @internal */
 export type CollapseBoundariesFn = PureComputed<
-  [number, VisibleBoundary[], ReadonlyArray<VisibleBoundary>[]],
+  [number, VisibleBoundary[], ReadonlyArray<VisibleBoundary>[], number],
   VisibleBoundary[]
 >;
 
@@ -55,7 +65,7 @@ export type GetCollapsedColumnsFn = PureComputed<
 /** @internal */
 export type GetCollapsedAndStubRowsFn = PureComputed<
 // tslint:disable-next-line: max-line-length
-  [TableRow[], VisibleBoundary, VisibleBoundary[], GetRowHeightFn, (r: TableRow) => ReadonlyArray<any>],
+  [TableRow[], VisibleBoundary, VisibleBoundary[], GetRowHeightFn, (r: TableRow) => ReadonlyArray<any>, number],
   CollapsedRow[]
 >;
 
@@ -69,14 +79,71 @@ export type GetCollapsedCellsFn = PureComputed<
 export type GetCollapsedGridFn = PureComputed<
   [{
     rows: TableRow[], columns: TableColumn[],
-    top: number, height: number, left: number, width: number,
-    getColumnWidth: GetColumnWidthFn, getRowHeight: GetRowHeightFn, getColSpan: GetColSpanFn,
+    rowsVisibleBoundary?: VisibleBoundary, columnsVisibleBoundary: VisibleBoundary[],
+    getColumnWidth: GetColumnWidthFn, getRowHeight: GetRowHeightFn,
+    getColSpan: GetColSpanFn,
+    totalRowCount: number,
+    offset: number,
   }],
   { columns: CollapsedColumn[], rows: CollapsedRow[] }
 >;
 
+/** @internal */
+export type CollapsedGrid = { columns: CollapsedColumn[], rows: CollapsedRow[] };
+/** @internal */
+export type GetCollapsedGridsFn = PureComputed<
+  [{
+    headerRows: TableRow[],
+    bodyRows: TableRow[],
+    footerRows: TableRow[],
+    columns: TableColumn[],
+    loadedRowsStart: number,
+    totalRowCount: number,
+    getCellColSpan?: GetCellColSpanFn,
+    viewportLeft: number,
+    containerWidth: number,
+    visibleRowBoundaries: GridRowsBoundaries,
+    getColumnWidth: GetColumnWidthFn,
+    getRowHeight: GetRowHeightFn,
+  }],
+  {
+    headerGrid: CollapsedGrid,
+    bodyGrid: CollapsedGrid,
+    footerGrid: CollapsedGrid,
+  }
+>;
+
 /** @internal */
 export type GetColumnWidthGetterFn = PureComputed<
   [TableColumn[], number, number],
   GetColumnWidthFn
 >;
+
+/** @internal */
+export type RowsVisibleBoundaryFn = PureComputed<
+  [any, Getters, number, GetRowHeightFn], GridRowsBoundaries
+>;
+
+/** @internal */
+export type GetRenderBoundaryFn = PureComputed<[number, number[], number], number[]>;
+/** @internal */
+export type GetSpecificRenderBoundaryFn = PureComputed<[number, number[]], number[]>;
+
+type PageTriggersMeta = {
+  topTriggerIndex: number,
+  topTriggerPosition: number,
+  bottomTriggerIndex: number,
+  bottomTriggerPosition: number,
+};
+/** @internal */
+export type GridGeometry = {
+  viewportTop: number;
+  containerHeight: number;
+  visibleRowBoundaries: GridRowsBoundaries;
+  estimatedRowHeight: number;
+};
+
+/** @internal */
+export type PageTriggersMetaFn = PureComputed<
+  [GridGeometry, Getters], PageTriggersMeta | null
+>;
diff --git a/packages/dx-grid-core/src/utils/virtual-table.test.ts b/packages/dx-grid-core/src/utils/virtual-table.test.ts
index ed1e8de50c..a5acf50204 100644
--- a/packages/dx-grid-core/src/utils/virtual-table.test.ts
+++ b/packages/dx-grid-core/src/utils/virtual-table.test.ts
@@ -10,6 +10,7 @@ import {
   getCollapsedGrid,
   TABLE_STUB_TYPE,
   getColumnWidthGetter,
+  getRenderBoundary,
 } from './virtual-table';
 
 describe('VirtualTableLayout utils', () => {
@@ -29,19 +30,44 @@ describe('VirtualTableLayout utils', () => {
         .toEqual([2, 4]);
     });
 
-    it('should work with overscan', () => {
+    it('should consider rows start offset and default height', () => {
       const items = [
         { size: 40 },
         { size: 40 },
         { size: 40 },
         { size: 40 },
         { size: 40 },
+      ];
+
+      expect(getVisibleBoundary(items, 600, 120, item => item.size, 20, 30))
+        .toEqual([20, 22]);
+    });
+
+    it('should work when rows are not loaded', () => {
+      const items = [
+        { size: 40 },
+        { size: 40 },
+        { size: 40 },
         { size: 40 },
         { size: 40 },
       ];
 
-      expect(getVisibleBoundary(items, 80, 120, item => item.size, 1))
-        .toEqual([1, 5]);
+      expect(getVisibleBoundary(items, 240, 120, item => item.size, 0, 40))
+        .toEqual([6, 6]);
+    });
+  });
+
+  describe('#getRenderBoundary', () => {
+    it('should correctly add overscan in simple case', () => {
+      expect(getRenderBoundary(20, [5, 10], 3)).toEqual([2, 13]);
+    });
+
+    it('should correctly add overscan when grid is scrolled to top', () => {
+      expect(getRenderBoundary(10, [0, 5], 3)).toEqual([0, 8]);
+    });
+
+    it('should correctly add overscan when grid is scrolled to bottom', () => {
+      expect(getRenderBoundary(10, [5, 9], 3)).toEqual([2, 9]);
     });
   });
 
@@ -271,6 +297,17 @@ describe('VirtualTableLayout utils', () => {
           [9, 9], // visible
         ]);
     });
+
+    it('should work when visible rows not loaded', () => {
+      const itemsCount = 100;
+      const visibleBoundary = [[Infinity, -Infinity]];
+      const spanBoundaries = [];
+
+      expect(collapseBoundaries(itemsCount, visibleBoundary, spanBoundaries))
+        .toEqual([
+          [0, 99], // stub
+        ]);
+    });
   });
 
   describe('#getCollapsedColumns', () => {
@@ -453,10 +490,10 @@ describe('VirtualTableLayout utils', () => {
           { key: 3, width: 40 }, // visible (overscan)
           { key: 4, width: 40 },
         ],
-        top: 160,
-        left: 80,
-        height: 40,
-        width: 40,
+        rowsVisibleBoundary: [1, 7],
+        columnsVisibleBoundary: [[1, 3]],
+        totalRowCount: 9,
+        offset: 0,
       };
 
       const result = getCollapsedGrid(args);
@@ -477,26 +514,26 @@ describe('VirtualTableLayout utils', () => {
         .toEqual([...Array.from({ length: 5 }).map(() => 1)]);
     });
 
-    it('should return empty result when there are no columns', () => {
+    it('should return empty result when there are no rows', () => {
       const args = {
         rows: [],
         columns: [
           { key: 0, width: 40 },
         ],
-        top: 0,
-        left: 0,
-        height: 80,
-        width: 80,
+        rowsVisibleBoundary: [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY],
+        columnsVisibleBoundary: [[0, 1]],
+        totalRowCount: 0,
+        offset: 0,
       };
       const result = {
-        columns: [],
+        columns: args.columns,
         rows: [],
       };
       expect(getCollapsedGrid(args))
         .toEqual(result);
     });
 
-    it('should return empty result when there are no rows', () => {
+    it('should return empty result when there are no columns', () => {
       const args = {
         rows: [
           { key: 0, height: 40 },
@@ -535,10 +572,8 @@ describe('VirtualTableLayout utils', () => {
           { key: 7, width: 40 }, // stub ┘
           { key: 8, width: 40 }, // stub
         ],
-        top: 0,
-        left: 160,
-        height: 40,
-        width: 40,
+        rowsVisibleBoundary: [0, 3],
+        columnsVisibleBoundary: [[3, 5]],
         getColSpan: (row, column) => {
           if (row.key === 0 && column.key === 2) return 2;
           if (row.key === 0 && column.key === 5) return 3;
@@ -546,6 +581,8 @@ describe('VirtualTableLayout utils', () => {
           if (row.key === 2 && column.key === 0) return 9;
           return 1;
         },
+        totalRowCount: 5,
+        offset: 0,
       };
 
       const result = getCollapsedGrid(args);
diff --git a/packages/dx-grid-core/src/utils/virtual-table.ts b/packages/dx-grid-core/src/utils/virtual-table.ts
index bf004733d0..f4ef1272aa 100644
--- a/packages/dx-grid-core/src/utils/virtual-table.ts
+++ b/packages/dx-grid-core/src/utils/virtual-table.ts
@@ -1,12 +1,18 @@
+import { PureComputed } from '@devexpress/dx-core';
 import {
   GetVisibleBoundaryWithFixedFn, VisibleBoundary, GetVisibleBoundaryFn, GetSpanBoundaryFn,
   CollapseBoundariesFn, GetColumnsSizeFn, GetCollapsedColumnsFn, CollapsedColumn,
   GetCollapsedAndStubRowsFn, GetCollapsedCellsFn, GetCollapsedGridFn, GetColumnWidthFn,
-  GetRowHeightFn,
+  TableColumn, TableRow,
   CollapsedCell,
   GetColumnWidthGetterFn,
+  RowsVisibleBoundary,
+  GetCollapsedGridsFn,
+  CollapsedGrid,
+  GetRenderBoundaryFn,
+  GetSpecificRenderBoundaryFn,
 } from '../types';
-import { TABLE_FLEX_TYPE } from '..';
+import { TABLE_FLEX_TYPE, intervalUtil } from '..';
 
 export const TABLE_STUB_TYPE = Symbol('stub');
 
@@ -20,14 +26,24 @@ export const getVisibleBoundaryWithFixed: GetVisibleBoundaryWithFixedFn = (
 }, [visibleBoundary] as [VisibleBoundary]);
 
 export const getVisibleBoundary: GetVisibleBoundaryFn = (
-  items, viewportStart, viewportSize, getItemSize, overscan,
+  items, viewportStart, viewportSize, getItemSize, offset = 0, itemSize = 0,
 ) => {
   let start: number | null = null;
   let end: number | null = null;
+  let index = 0;
+  let beforePosition = offset * itemSize;
+  const noVisibleRowsLoaded = itemSize > 0 &&
+    beforePosition + items.length * itemSize < viewportStart ||
+    viewportStart < beforePosition;
+
+  if (noVisibleRowsLoaded) {
+    beforePosition = viewportStart;
+    index = items.length;
+    start = Math.round(viewportStart / itemSize) - offset;
+    end = start;
+  }
 
   const viewportEnd = viewportStart + viewportSize;
-  let index = 0;
-  let beforePosition = 0;
   while (end === null && index < items.length) {
     const item = items[index];
     const afterPosition = beforePosition + getItemSize(item)!;
@@ -51,92 +67,104 @@ export const getVisibleBoundary: GetVisibleBoundaryFn = (
   start = start === null ? 0 : start;
   end = end === null ? 0 : end;
 
-  if (overscan) {
-    start = Math.max(0, start - overscan);
-    end = Math.min(items.length - 1, end + overscan);
-  }
+  return [start + offset, end + offset];
+};
+
+export const getRenderBoundary: GetRenderBoundaryFn = (itemsCount, visibleBoundary, overscan) => {
+  let [start, end] = visibleBoundary;
+  start = Math.max(0, start - overscan);
+  end = Math.min(itemsCount - 1, end + overscan);
 
   return [start, end];
 };
 
+export const getColumnsVisibleBoundary: PureComputed<
+  [TableColumn[], number, number, GetColumnWidthFn], VisibleBoundary[]
+> = (columns, left, width, getColumnWidth) => (
+  getVisibleBoundaryWithFixed(
+    getVisibleBoundary(columns, left, width, getColumnWidth, 0),
+    columns,
+  )
+);
+export const getRowsVisibleBoundary: PureComputed<
+[TableRow[], number, number, GetColumnWidthFn, number, number], RowsVisibleBoundary
+> = (rows, top, height, getRowHeight, offset, rowHeight) => {
+  const boundaries = getVisibleBoundary(rows, top, height, getRowHeight, offset, rowHeight);
+  const start = boundaries[0];
+  const end = boundaries[1];
+
+  return {
+    start,
+    end,
+  };
+};
+
+export const getColumnsRenderBoundary: GetSpecificRenderBoundaryFn = (
+  columnCount, visibleBoundary,
+) => getRenderBoundary(columnCount, visibleBoundary, 1);
+
+export const getRowsRenderBoundary: GetSpecificRenderBoundaryFn = (
+  rowsCount, visibleBoundary,
+) => getRenderBoundary(rowsCount, visibleBoundary, 3);
+
 export const getSpanBoundary: GetSpanBoundaryFn = (
   items, visibleBoundaries, getItemSpan,
 ) => visibleBoundaries
-      .map((visibleBoundary) => {
-        let [start, end] = visibleBoundary;
-
-        for (let index = 0; index <= visibleBoundary[1]; index += 1) {
-          const span = getItemSpan(items[index]);
-          if (index < visibleBoundary[0] && index + span > visibleBoundary[0]) {
-            start = index;
-          }
-          if (index + (span - 1) > visibleBoundary[1]) {
-            end = index + (span - 1);
-          }
-        }
-        return [start, end] as VisibleBoundary;
-      });
+  .map((visibleBoundary) => {
+    let [start, end] = visibleBoundary;
+    for (let index = 0; index <= visibleBoundary[1]; index += 1) {
+      const span = getItemSpan(items[index]);
+      if (index < visibleBoundary[0] && index + span > visibleBoundary[0]) {
+        start = index;
+      }
+      if (index + (span - 1) > visibleBoundary[1]) {
+        end = index + (span - 1);
+      }
+    }
+    return [start, end] as VisibleBoundary;
+  });
 
 export const collapseBoundaries: CollapseBoundariesFn = (
   itemsCount, visibleBoundaries, spanBoundaries,
 ) => {
-  const boundaries: VisibleBoundary[] = [];
-
-  const visiblePoints = visibleBoundaries.reduce((acc: number[], boundary) => {
-    for (let point = boundary[0]; point <= boundary[1]; point += 1) {
-      acc.push(point);
-    }
-    return acc;
-  }, []);
-
-  const spanStartPoints = new Set();
-  const spanEndPoints = new Set();
+  const breakpoints = new Set([0, itemsCount]);
   spanBoundaries.forEach(rowBoundaries => rowBoundaries
     .forEach((boundary) => {
-      spanStartPoints.add(boundary[0]);
-      spanEndPoints.add(boundary[1]);
+      breakpoints.add(boundary[0]);
+      if (boundary[1] - 1 < itemsCount) {
+        // next interval starts after span end point
+        breakpoints.add(boundary[1] + 1);
+      }
     }));
 
-  let lastPoint: number | undefined;
-  for (let index = 0; index < itemsCount; index += 1) {
-    if (visiblePoints.indexOf(index) !== -1) {
-      if (lastPoint !== undefined) {
-        boundaries.push([lastPoint, index - 1]);
-        lastPoint = undefined;
+  visibleBoundaries
+    .filter(boundary => boundary.every(bound => 0 <= bound && bound < itemsCount))
+    .forEach((boundary) => {
+      for (let point = boundary[0]; point <= boundary[1]; point += 1) {
+        breakpoints.add(point);
       }
-      boundaries.push([index, index]);
-    } else if (spanStartPoints.has(index)) {
-      if (index > 0) {
-        boundaries.push([
-          lastPoint !== undefined ? lastPoint : index,
-          index - 1,
-        ]);
+      if (boundary[1] + 1 < itemsCount) {
+        // close last visible point
+        breakpoints.add(boundary[1] + 1);
       }
-      lastPoint = index;
-    } else if (spanEndPoints.has(index)) {
-      boundaries.push([
-        lastPoint !== undefined ? lastPoint : index,
-        index,
-      ]);
-      lastPoint = undefined;
-    } else if (lastPoint === undefined) {
-      lastPoint = index;
-    }
-  }
+    });
 
-  if (lastPoint !== undefined) {
-    boundaries.push([lastPoint, itemsCount - 1]);
+  const bp = [...breakpoints].sort((a, b) => a - b);
+  const bounds: any[] = [];
+  for (let i = 0; i < bp.length - 1; i += 1) {
+    bounds.push([
+      bp[i],
+      bp[i + 1] - 1,
+    ]);
   }
 
-  return boundaries;
+  return bounds;
 };
 
 const getColumnsSize: GetColumnsSizeFn = (columns, startIndex, endIndex, getColumnSize) => {
   let size = 0;
-  let index;
-  const loopEndIndex = endIndex + 1;
-  for (index = startIndex; index < loopEndIndex; index += 1) {
-    size += getColumnSize(columns[index], 0) || 0;
+  for (let i = startIndex; i <= endIndex; i += 1) {
+    size += getColumnSize(columns[i], 0) || 0;
   }
   return size;
 };
@@ -168,24 +196,26 @@ export const getCollapsedColumns: GetCollapsedColumnsFn = (
 };
 
 export const getCollapsedRows: GetCollapsedAndStubRowsFn = (
-  rows, visibleBoundary, boundaries, getRowHeight, getCells,
+  rows, visibleBoundary, boundaries, getRowHeight, getCells, offset,
 ) => {
   const collapsedRows: any[] = [];
   boundaries.forEach((boundary) => {
     const isVisible = visibleBoundary[0] <= boundary[0] && boundary[1] <= visibleBoundary[1];
     if (isVisible) {
-      const row = rows[boundary[0]];
+      const row = rows[boundary[0] - offset];
       collapsedRows.push({
         row,
         cells: getCells(row),
       });
     } else {
+      const row = {} as any;
       collapsedRows.push({
         row: {
           key: `${TABLE_STUB_TYPE.toString()}_${boundary[0]}_${boundary[1]}`,
           type: TABLE_STUB_TYPE,
           height: getColumnsSize(rows, boundary[0], boundary[1], getRowHeight),
         },
+        cells: getCells(row),
       });
     }
   });
@@ -232,28 +262,25 @@ export const getCollapsedCells: GetCollapsedCellsFn = (
 export const getCollapsedGrid: GetCollapsedGridFn = ({
   rows,
   columns,
-  top,
-  height,
-  left,
-  width,
-  getColumnWidth = (column => column.width) as GetColumnWidthFn,
-  getRowHeight = (row => row.height) as GetRowHeightFn,
-  getColSpan = (...args: any[]) => 1,
+  rowsVisibleBoundary,
+  columnsVisibleBoundary,
+  getColumnWidth = (column: any) => column.width,
+  getRowHeight = (row: any) => row.height,
+  getColSpan = () => 1,
+  totalRowCount,
+  offset,
 }) => {
-  if (!rows.length || !columns.length) {
+  if (!columns.length) {
     return {
       columns: [],
       rows: [],
     };
   }
-  const rowsVisibleBoundary = getVisibleBoundary(rows, top, height, getRowHeight, 3);
-  const columnsVisibleBoundary = getVisibleBoundaryWithFixed(
-    getVisibleBoundary(columns, left, width, getColumnWidth, 1),
-    columns,
-  );
+
+  const boundaries = rowsVisibleBoundary || [0, rows.length - 1 || 1];
 
   const rowSpanBoundaries = rows
-    .slice(rowsVisibleBoundary[0], rowsVisibleBoundary[1])
+    .slice(boundaries[0], boundaries[1])
     .map(row => getSpanBoundary(
       columns,
       columnsVisibleBoundary,
@@ -263,9 +290,10 @@ export const getCollapsedGrid: GetCollapsedGridFn = ({
     columns.length,
     columnsVisibleBoundary,
     rowSpanBoundaries,
+    0,
   );
 
-  const rowBoundaries = collapseBoundaries(rows.length, [rowsVisibleBoundary], []);
+  const rowBoundaries = collapseBoundaries(totalRowCount!, [boundaries], [], offset);
 
   return {
     columns: getCollapsedColumns(
@@ -276,7 +304,7 @@ export const getCollapsedGrid: GetCollapsedGridFn = ({
     ),
     rows: getCollapsedRows(
       rows,
-      rowsVisibleBoundary,
+      boundaries,
       rowBoundaries,
       getRowHeight,
       row => getCollapsedCells(
@@ -289,6 +317,7 @@ export const getCollapsedGrid: GetCollapsedGridFn = ({
         columnBoundaries,
         column => getColSpan(row, column),
       ),
+      offset,
     ),
   };
 };
@@ -305,3 +334,88 @@ export const getColumnWidthGetter: GetColumnWidthGetterFn = (
     ? null
     : column.width || autoColWidth);
 };
+
+export const getCollapsedGrids: GetCollapsedGridsFn = ({
+    headerRows = [],
+    bodyRows = [],
+    footerRows = [],
+    columns,
+    loadedRowsStart,
+    totalRowCount,
+    getCellColSpan,
+    viewportLeft,
+    containerWidth,
+    visibleRowBoundaries,
+    getColumnWidth,
+    getRowHeight,
+  },
+) => {
+  const getColSpan = (
+    tableRow: any, tableColumn: any,
+  ) => getCellColSpan!({ tableRow, tableColumn, tableColumns: columns });
+
+  const visibleColumnBoundaries = [
+    getColumnsRenderBoundary(
+      columns.length,
+      getColumnsVisibleBoundary(
+        columns, viewportLeft, containerWidth, getColumnWidth,
+      )[0],
+    ),
+  ];
+  const getCollapsedGridBlock: PureComputed<
+    [any[], any[]?, number?, number?], CollapsedGrid
+  > = (
+    rows, rowsVisibleBoundary, rowCount = rows.length, offset = 0,
+  ) => getCollapsedGrid({
+    rows,
+    columns,
+    rowsVisibleBoundary,
+    columnsVisibleBoundary: visibleColumnBoundaries,
+    getColumnWidth,
+    getRowHeight,
+    getColSpan,
+    totalRowCount: rowCount,
+    offset,
+  });
+
+  const headerGrid = getCollapsedGridBlock(
+    headerRows, getRenderRowBounds(visibleRowBoundaries.header, headerRows.length),
+  );
+  const bodyGrid = getCollapsedGridBlock(
+    bodyRows,
+    adjustedRenderRowBounds(
+      visibleRowBoundaries.body, bodyRows.length, loadedRowsStart,
+    ),
+    totalRowCount || 1,
+    loadedRowsStart,
+  );
+  const footerGrid = getCollapsedGridBlock(
+    footerRows, getRenderRowBounds(visibleRowBoundaries.footer, footerRows.length),
+  );
+
+  return {
+    headerGrid,
+    bodyGrid,
+    footerGrid,
+  };
+};
+
+const getRenderRowBounds: PureComputed<[RowsVisibleBoundary, number], number[]> = (
+  visibleBounds, rowCount,
+) => getRowsRenderBoundary(
+  rowCount,
+  [visibleBounds.start, visibleBounds.end],
+);
+
+const adjustedRenderRowBounds: PureComputed<[RowsVisibleBoundary, number, number], number[]> = (
+  visibleBounds, rowCount, loadedRowsStart,
+) => {
+  const renderRowBoundaries = getRenderRowBounds(
+    visibleBounds, loadedRowsStart + rowCount,
+  );
+  const adjustedInterval = intervalUtil.intersect(
+    { start: renderRowBoundaries[0], end: renderRowBoundaries[1] },
+    { start: loadedRowsStart, end: loadedRowsStart + rowCount },
+  );
+  return [adjustedInterval.start, adjustedInterval.end];
+};
diff --git a/packages/dx-react-core/src/draggable.tsx b/packages/dx-react-core/src/draggable.tsx
index 2882380d3b..d8c17e472d 100644
--- a/packages/dx-react-core/src/draggable.tsx
+++ b/packages/dx-react-core/src/draggable.tsx
@@ -20,7 +20,6 @@ export class Draggable extends React.Component<DraggableProps> {
 
   constructor(props, context) {
     super(props, context);
-
     const delegate = {
       onStart: ({ x, y }) => {
         const { onStart } = this.props;
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/virtual-table.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/virtual-table.jsx
index 83dbc1ab34..878e992dc5 100644
--- a/packages/dx-react-grid-bootstrap3/src/plugins/virtual-table.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/plugins/virtual-table.jsx
@@ -3,6 +3,7 @@ import { makeVirtualTable } from '@devexpress/dx-react-grid';
 import { Table } from './table';
 import { Table as TableComponent } from '../templates/table';
 import { VirtualTableLayout as VirtualLayout } from '../templates/virtual-table-layout';
+import { TableSkeletonCell as SkeletonCell } from '../templates/table-skeleton-cell';
 
 const FixedHeader = props => <TableComponent use="head" {...props} />;
 const FixedFooter = props => <TableComponent use="foot" {...props} />;
@@ -11,6 +12,7 @@ export const VirtualTable = makeVirtualTable(Table, {
   VirtualLayout,
   FixedHeader,
   FixedFooter,
+  SkeletonCell,
   defaultEstimatedRowHeight: 37,
   defaultHeight: 530,
 });
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.jsx
new file mode 100644
index 0000000000..08f43102c3
--- /dev/null
+++ b/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.jsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+export const TableSkeletonCell = ({
+  style,
+  tableRow,
+  tableColumn,
+  ...restProps
+}) => (
+  <td
+    style={{
+      padding: 7,
+      backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1RUVFQzAzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1RUVFQkYzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvLbJKYAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC)',
+      backgroundRepeat: 'no-repeat repeat',
+      backgroundOrigin: 'content-box',
+      ...style,
+    }}
+    {...restProps}
+  />
+);
+
+TableSkeletonCell.propTypes = {
+  style: PropTypes.object,
+  tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
+};
+
+TableSkeletonCell.defaultProps = {
+  style: null,
+  tableRow: undefined,
+  tableColumn: undefined,
+};
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.test.jsx
new file mode 100644
index 0000000000..e9a95f21e7
--- /dev/null
+++ b/packages/dx-react-grid-bootstrap3/src/templates/table-skeleton-cell.test.jsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { TableSkeletonCell } from './table-skeleton-cell';
+
+describe('TableSkeletonCell', () => {
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableSkeletonCell className="custom-class" />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+});
diff --git a/packages/dx-react-grid-bootstrap4/src/plugins/virtual-table.jsx b/packages/dx-react-grid-bootstrap4/src/plugins/virtual-table.jsx
index 716c4baf4b..2ebeb5ab2c 100644
--- a/packages/dx-react-grid-bootstrap4/src/plugins/virtual-table.jsx
+++ b/packages/dx-react-grid-bootstrap4/src/plugins/virtual-table.jsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { makeVirtualTable } from '@devexpress/dx-react-grid';
 import { Table } from './table';
 import { Table as TableComponent } from '../templates/table';
+import { TableSkeletonCell as SkeletonCell } from '../templates/table-skeleton-cell';
 import { VirtualTableLayout as VirtualLayout } from '../templates/virtual-table-layout';
 
 const FixedHeader = props => <TableComponent use="head" {...props} />;
@@ -11,6 +12,7 @@ export const VirtualTable = makeVirtualTable(Table, {
   VirtualLayout,
   FixedHeader,
   FixedFooter,
+  SkeletonCell,
   defaultEstimatedRowHeight: 49,
   defaultHeight: 530,
 });
diff --git a/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.jsx b/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.jsx
new file mode 100644
index 0000000000..d0b1fec603
--- /dev/null
+++ b/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.jsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const TableSkeletonCell = ({
+  className,
+  tableRow,
+  tableColumn,
+  ...restProps
+}) => (
+  <td
+    className={classNames('dx-g-bs4-skeleton-cell', className)}
+    {...restProps}
+  />
+);
+
+TableSkeletonCell.propTypes = {
+  className: PropTypes.string,
+  tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
+};
+
+TableSkeletonCell.defaultProps = {
+  className: undefined,
+  tableRow: undefined,
+  tableColumn: undefined,
+};
diff --git a/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.test.jsx b/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.test.jsx
new file mode 100644
index 0000000000..160301abd1
--- /dev/null
+++ b/packages/dx-react-grid-bootstrap4/src/templates/table-skeleton-cell.test.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { TableSkeletonCell } from './table-skeleton-cell';
+
+describe('TableSkeletonCell', () => {
+  it('should pass custom class to the root element', () => {
+    const tree = shallow((
+      <TableSkeletonCell className="custom-class" />
+    ));
+
+    expect(tree.is('.dx-g-bs4-skeleton-cell.custom-class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableSkeletonCell data={{ a: 1 }} />
+    ));
+
+    expect(tree.prop('data'))
+      .toEqual({ a: 1 });
+  });
+});
diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/infinite-scrolling.jsxt b/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/infinite-scrolling.jsxt
new file mode 100644
index 0000000000..bcaee39c39
--- /dev/null
+++ b/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/infinite-scrolling.jsxt
@@ -0,0 +1,102 @@
+import * as React from 'react';<%&additionalImports%>
+import {
+  VirtualTableState,
+  createRemoteRowsCache,
+} from '@devexpress/dx-react-grid';
+import {
+  Grid,
+  VirtualTable,
+  TableHeaderRow,
+} from '@devexpress/dx-react-grid-<%&themeName%>';
+
+const VIRTUAL_PAGE_SIZE = 100;
+const MAX_ROWS = 50000;
+const URL = 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales';
+
+const buildQueryString = (skip, take) => (
+  `${URL}?requireTotalCount=true&skip=${skip}&take=${take}`
+);
+const getRowId = row => row.Id;
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'id', title: 'Id', getCellValue: row => row.Id },
+        { name: 'category', title: 'Category', getCellValue: row => row.ProductCategoryName },
+        { name: 'store', title: 'Store', getCellValue: row => row.StoreName },
+        { name: 'product', title: 'Product', getCellValue: row => row.ProductName },
+        { name: 'date', title: 'Date', getCellValue: row => row.DateKey },
+        { name: 'amount', title: 'Amount', getCellValue: row => row.SalesAmount },
+      ],
+      rows: [],
+      tableColumnExtensions: [
+        { columnName: 'id', width: 80 },
+        { columnName: 'category', width: 220 },
+        { columnName: 'store', width: 220 },
+        { columnName: 'date', width: 150 },
+        { columnName: 'amount', width: 120 },
+      ],
+      skip: 0,
+      totalCount: MAX_ROWS,
+      loading: true,
+    };
+
+    const cache = createRemoteRowsCache(VIRTUAL_PAGE_SIZE);
+    const setRows = (skip, count, totalCount) => {
+      const rows = cache.getRows(skip, count);
+      this.setState({
+        rows,
+        skip,
+        totalCount: totalCount < MAX_ROWS ? totalCount : MAX_ROWS,
+        loading: false,
+      });
+    };
+
+    this.getRemoteRows = (skip, take) => {
+      const cached = cache.getRows(skip, take);
+      if (cached.length) {
+        setRows(skip, take);
+      } else {
+        this.setState({ loading: true });
+        const query = buildQueryString(skip, take);
+        fetch(query, { mode: 'cors' })
+          .then(response => response.json())
+          .then(({ data, totalCount }) => {
+            cache.setRows(skip, data);
+            setRows(skip, take, totalCount);
+          })
+          .catch(() => this.setState({ loading: false }));
+      }
+    };
+  }
+
+  render() {
+    const {
+      rows, columns, skip, totalCount, tableColumnExtensions, loading,
+    } = this.state;
+
+    return (
+      <<%&wrapperTag%><%&wrapperAttributes%>>
+        <Grid
+          rows={rows}
+          columns={columns}
+          getRowId={getRowId}
+        >
+          <VirtualTableState
+            infiniteScrolling
+            loading={loading}
+            totalRowCount={totalCount}
+            pageSize={VIRTUAL_PAGE_SIZE}
+            skip={skip}
+            getRows={this.getRemoteRows}
+          />
+          <VirtualTable columnExtensions={tableColumnExtensions} />
+          <TableHeaderRow />
+        </Grid>
+      </<%&wrapperTag%>>
+    );
+  }
+}
diff --git a/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/remote-data.jsxt b/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/remote-data.jsxt
new file mode 100644
index 0000000000..c9c3a0b915
--- /dev/null
+++ b/packages/dx-react-grid-demos/src/demo-sources/grid-virtual-scrolling/remote-data.jsxt
@@ -0,0 +1,167 @@
+import * as React from 'react';<%&additionalImports%>
+import {
+  VirtualTableState,
+  DataTypeProvider,
+  FilteringState,
+  SortingState,
+  createRemoteRowsCache,
+} from '@devexpress/dx-react-grid';
+import {
+  Grid,
+  VirtualTable,
+  TableHeaderRow,
+  TableFilterRow,
+} from '@devexpress/dx-react-grid-<%&themeName%>';
+import { Loading } from '../../../theme-sources/<%&themeName%>/components/loading';
+
+const VIRTUAL_PAGE_SIZE = 100;
+const MAX_ROWS = 50000;
+const URL = 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales';
+const getRowId = row => row.Id;
+
+const CurrencyFormatter = ({ value }) => (
+  <b style={{ color: 'darkblue' }}>
+$
+    {value}
+  </b>
+);
+
+const CurrencyTypeProvider = props => (
+  <DataTypeProvider
+    formatterComponent={CurrencyFormatter}
+    {...props}
+  />
+);
+
+const DateFormatter = ({ value }) => value.replace(/(\d{4})-(\d{2})-(\d{2})(T.*)/, '$3.$2.$1');
+
+const DateTypeProvider = props => (
+  <DataTypeProvider
+    formatterComponent={DateFormatter}
+    {...props}
+  />
+);
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'Id', title: 'Id', getCellValue: row => row.Id },
+        { name: 'ProductCategoryName', title: 'Category', getCellValue: row => row.ProductCategoryName },
+        { name: 'StoreName', title: 'Store', getCellValue: row => row.StoreName },
+        { name: 'ProductName', title: 'Product', getCellValue: row => row.ProductName },
+        { name: 'DateKey', title: 'Date', getCellValue: row => row.DateKey },
+        { name: 'SalesAmount', title: 'Amount', getCellValue: row => row.SalesAmount },
+      ],
+      rows: [],
+      tableColumnExtensions: [
+        { columnName: 'Id', width: 80 },
+        { columnName: 'ProductCategoryName', width: 220 },
+        { columnName: 'StoreName', width: 220 },
+        { columnName: 'DateKey', width: 150 },
+        { columnName: 'SalesAmount', width: 120 },
+      ],
+      skip: 0,
+      totalCount: MAX_ROWS,
+      loading: true,
+      filters: [],
+      sorting: [],
+    };
+
+    const cache = createRemoteRowsCache(VIRTUAL_PAGE_SIZE);
+    const setRows = (skip, count, totalCount) => {
+      const rows = cache.getRows(skip, count);
+      this.setState({
+        rows,
+        skip,
+        totalCount: totalCount < MAX_ROWS ? totalCount : MAX_ROWS,
+        loading: false,
+      });
+    };
+
+    this.getRemoteRows = (skip, take) => {
+      const cached = cache.getRows(skip, take);
+      if (cached.length) {
+        setRows(skip, take);
+      } else {
+        this.setState({ loading: true });
+        const query = this.buildQueryString(skip, take);
+        fetch(query, { mode: 'cors' })
+          .then(response => response.json())
+          .then(({ data, totalCount }) => {
+            cache.setRows(skip, data);
+            setRows(skip, take, totalCount);
+          })
+          .catch(() => this.setState({ loading: false }));
+      }
+    };
+
+    this.changeFilters = (filters) => {
+      cache.invalidate();
+      this.setState({ filters, rows: [] });
+    };
+
+    this.changeSorting = (sorting) => {
+      cache.invalidate();
+      this.setState({ sorting, rows: [] });
+    };
+  }
+
+  buildQueryString(skip, take) {
+    const { filters, sorting } = this.state;
+    const filterStr = filters
+      .map(({ columnName, value, operation }) => (
+        `["${columnName}","${operation}","${value}"]`
+      )).join(',"and",');
+    const sortingConfig = sorting
+      .map(({ columnName, direction }) => ({
+        selector: columnName,
+        desc: direction === 'desc',
+      }));
+    const sortingStr = JSON.stringify(sortingConfig);
+    const filterQuery = filterStr ? `&filter=${escape(filterStr)}` : '';
+    const sortQuery = sortingStr ? `&sort=${escape(`${sortingStr}`)}` : '';
+
+    return `${URL}?requireTotalCount=true&skip=${skip}&take=${take}${filterQuery}${sortQuery}`;
+  }
+
+  render() {
+    const {
+      rows, columns, skip, totalCount, tableColumnExtensions, loading, filters, sorting,
+    } = this.state;
+
+    return (
+      <<%&wrapperTag%><%&wrapperAttributes%>>
+        <Grid
+          rows={rows}
+          columns={columns}
+          getRowId={getRowId}
+        >
+          <CurrencyTypeProvider for={['amount', 'price']} />
+          <DateTypeProvider for={['date']} />
+          <VirtualTableState
+            loading={loading}
+            totalRowCount={totalCount}
+            pageSize={VIRTUAL_PAGE_SIZE}
+            skip={skip}
+            getRows={this.getRemoteRows}
+          />
+          <SortingState
+            sorting={sorting}
+            onSortingChange={this.changeSorting}
+          />
+          <FilteringState
+            filters={filters}
+            onFiltersChange={this.changeFilters}
+          />
+          <VirtualTable columnExtensions={tableColumnExtensions} />
+          <TableHeaderRow showSortingControls />
+          <TableFilterRow />
+        </Grid>
+        {loading && <Loading />}
+      </<%&wrapperTag%>>
+    );
+  }
+}
diff --git a/packages/dx-react-grid-material-ui/src/plugins/table.jsx b/packages/dx-react-grid-material-ui/src/plugins/table.jsx
index c6aacb6bfa..4e24cfc038 100644
--- a/packages/dx-react-grid-material-ui/src/plugins/table.jsx
+++ b/packages/dx-react-grid-material-ui/src/plugins/table.jsx
@@ -28,6 +28,8 @@ export const Table = withComponents({
   StubHeaderCell: StubCell,
 })(TableBase);
 
+Table.components = TableBase.components;
+
 Table.COLUMN_TYPE = TableBase.COLUMN_TYPE;
 Table.ROW_TYPE = TableBase.ROW_TYPE;
 Table.NODATA_ROW_TYPE = TableBase.NODATA_ROW_TYPE;
diff --git a/packages/dx-react-grid-material-ui/src/plugins/virtual-table.jsx b/packages/dx-react-grid-material-ui/src/plugins/virtual-table.jsx
index c5403efc12..fb9a6521a2 100644
--- a/packages/dx-react-grid-material-ui/src/plugins/virtual-table.jsx
+++ b/packages/dx-react-grid-material-ui/src/plugins/virtual-table.jsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { makeVirtualTable } from '@devexpress/dx-react-grid';
 import { Table } from './table';
 import { Table as TableComponent } from '../templates/table';
+import { TableSkeletonCell as SkeletonCell } from '../templates/table-skeleton-cell';
 import { VirtualTableLayout as VirtualLayout } from '../templates/virtual-table-layout';
 
 const FixedHeader = props => <TableComponent use="head" {...props} />;
@@ -11,6 +12,7 @@ export const VirtualTable = makeVirtualTable(Table, {
   VirtualLayout,
   FixedHeader,
   FixedFooter,
+  SkeletonCell,
   defaultEstimatedRowHeight: 48,
   defaultHeight: 530,
 });
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx
new file mode 100644
index 0000000000..b3bd2faca8
--- /dev/null
+++ b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.jsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import TableCell from '@material-ui/core/TableCell';
+
+const styles = theme => ({
+  cell: {
+    padding: theme.spacing.unit,
+    backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1RUVFQzAzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1RUVFQkYzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvLbJKYAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC)',
+    backgroundRepeat: 'no-repeat repeat',
+    backgroundOrigin: 'content-box',
+  },
+});
+
+const TableSkeletonCellBase = ({
+  classes,
+  className,
+  tableRow,
+  tableColumn,
+  ...restProps
+}) => (
+  <TableCell
+    className={classNames(classes.cell, className)}
+    {...restProps}
+  />
+);
+
+TableSkeletonCellBase.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
+};
+
+TableSkeletonCellBase.defaultProps = {
+  className: undefined,
+  tableRow: undefined,
+  tableColumn: undefined,
+};
+
+export const TableSkeletonCell = withStyles(styles, { name: 'TableSkeletonCell' })(TableSkeletonCellBase);
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx
new file mode 100644
index 0000000000..74167b36dc
--- /dev/null
+++ b/packages/dx-react-grid-material-ui/src/templates/table-skeleton-cell.test.jsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { TableSkeletonCell } from './table-skeleton-cell';
+
+describe('TableSkeletonCell', () => {
+  let shallow;
+  let classes;
+  beforeAll(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<TableSkeletonCell />);
+  });
+
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <TableSkeletonCell className="custom-class" />
+    ));
+
+    expect(tree.is(`.${classes.cell}`))
+      .toBeTruthy();
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableSkeletonCell data={{ a: 1 }} />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+});
diff --git a/packages/dx-react-grid/api/dx-react-grid.api.ts b/packages/dx-react-grid/api/dx-react-grid.api.ts
index 6a25c5e491..ae4547c270 100644
--- a/packages/dx-react-grid/api/dx-react-grid.api.ts
+++ b/packages/dx-react-grid/api/dx-react-grid.api.ts
@@ -69,6 +69,16 @@ interface ColumnChooserProps {
     toggleButtonComponent: React.ComponentType<ColumnChooser.ToggleButtonProps>;
 }
 
+// @public (undocumented)
+declare const createRemoteRowsCache: (pageSize: number, capacity?: number) => {
+  // (undocumented)
+  getRows: (skip: number, count: number) => any[];
+  // (undocumented)
+  setRows: (skip: number, rows: ReadonlyArray<any>) => void;
+  // (undocumented)
+  invalidate: () => void;
+};
+
 // @public
 declare const CustomGrouping: React.ComponentType<CustomGroupingProps>;
 
@@ -1281,11 +1291,32 @@ interface VirtualTableProps {
     noDataCellComponent: React.ComponentType<Table.NoDataCellProps>;
     noDataRowComponent: React.ComponentType<Table.RowProps>;
     rowComponent: React.ComponentType<Table.DataRowProps>;
+    // (undocumented)
+    skeletonCellComponent: React.ComponentType<Table.CellProps>;
     stubCellComponent: React.ComponentType<Table.CellProps>;
     stubHeaderCellComponent: React.ComponentType<Table.CellProps>;
     stubRowComponent: React.ComponentType<Table.RowProps>;
     tableComponent: React.ComponentType<object>;
 }
 
+// @public (undocumented)
+declare const VirtualTableState: React.ComponentType<VirtualTableStateProps>;
+
+// @public (undocumented)
+interface VirtualTableStateProps {
+  // (undocumented)
+  getRows: (skip: number, take: number) => void;
+  // (undocumented)
+  infiniteScrolling: boolean;
+  // (undocumented)
+  loading: boolean;
+  // (undocumented)
+  pageSize?: number;
+  // (undocumented)
+  skip: number;
+  // (undocumented)
+  totalRowCount: number;
+}
+
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/dx-react-grid/docs/reference/virtual-table-state.md b/packages/dx-react-grid/docs/reference/virtual-table-state.md
new file mode 100644
index 0000000000..6ce0efacf7
--- /dev/null
+++ b/packages/dx-react-grid/docs/reference/virtual-table-state.md
@@ -0,0 +1,47 @@
+# VirtualTableState Plugin Reference
+
+A plugin that manages remote data for the virtual table.
+
+## Import
+
+Use the following statement to import the plugin:
+
+```js
+import { VirtualTableState } from '@devexpress/dx-react-grid';
+```
+
+## User Reference
+
+### Dependencies
+
+none
+
+### Properties
+
+Name | Type | Default | Description
+-----|------|---------|------------
+skip | number | | Specifies the index that the first row of the current chunk has in the entire data set.
+totalRowCount | number | | Specifies the total row count.
+pageSize? | number | 100 | Specifies the count of rows in the current chunk.
+loading | boolean | | Specifies whether data is loading.
+infiniteScrolling? | boolean | | Enables a scrolling mode in which rows are loaded in sequence.
+getRows | (skip: number, take: number) => void | | Starts to load remote data for grid rows.
+
+## Plugin Developer Reference
+
+### Imports
+
+Name | Plugin | Type | Description
+-----|--------|------|------------
+rows | [Getter](../../../dx-react-core/docs/reference/getter.md) | Array&lt;any&gt; | Rows to be rendered.
+
+### Exports
+
+Name | Plugin | Type | Description
+-----|--------|------|------------
+isDataRemote | [Getter](../../../dx-react-core/docs/reference/getter.md) | boolean | Indicates whether data is loaded from a remote source.
+isDataLoading | [Getter](../../../dx-react-core/docs/reference/getter.md) | boolean | Indicates whether data is loading.
+isScrollingInfinite | [Getter](../../../dx-react-core/docs/reference/getter.md) | boolean | Indicates whether the infinite scrolling mode is enabled.
+skip | [Getter](../../../dx-react-core/docs/reference/getter.md) | number | The index that the first row of the current chunk has in the entire data set.
+requestNextPage | [Action](../../../dx-react-core/docs/reference/action.md) | (skip: number, take: number) => void | Starts to load the next data chunk.
+clearRowCache | [Action](../../../dx-react-core/docs/reference/action.md) | () => void | Removes loaded rows from the cache.
diff --git a/packages/dx-react-grid/package.json b/packages/dx-react-grid/package.json
index a85a344f96..9c40fd5880 100644
--- a/packages/dx-react-grid/package.json
+++ b/packages/dx-react-grid/package.json
@@ -38,7 +38,7 @@
   "typings": "dist/dx-react-grid.d.ts",
   "scripts": {
     "test": "jest",
-    "test:watch": "jest --watch",
+    "test:watch": "jest --watch --runInBand",
     "test:coverage": "jest --coverage",
     "build": "rollup -c rollup.config.js",
     "build:watch": "rollup -c rollup.config.js -w",
diff --git a/packages/dx-react-grid/src/components/table-layout.test.tsx b/packages/dx-react-grid/src/components/table-layout.test.tsx
index bd40dfa973..c0b3073227 100644
--- a/packages/dx-react-grid/src/components/table-layout.test.tsx
+++ b/packages/dx-react-grid/src/components/table-layout.test.tsx
@@ -95,6 +95,44 @@ describe('TableLayout', () => {
       minColumnWidth: 100,
     };
 
+    it('should not be updated if columns were not changed', () => {
+      const tree = mount((
+        <TableLayout
+          {...animationDefaultProps}
+        />
+      ));
+
+      tree.setProps({ columns: columns.slice() });
+      rafCallback();
+      tree.setProps({ columns: columns.slice() });
+      tree.update();
+      rafCallback();
+
+      expect(getAnimations).not.toBeCalled();
+    });
+
+    it('should be updated if an active animation is in progress', () => {
+      filterActiveAnimations.mockImplementation(() => new Map([['col', {}]]));
+      getAnimations.mockImplementation(() => new Map([['col', {}]]));
+      evalAnimations.mockImplementation(() => new Map());
+      const nextColumns = [columns[1], columns[0]];
+      const tree = mount((
+        <TableLayout
+          {...animationDefaultProps}
+        />
+      ));
+
+      tree.setProps({ columns: nextColumns });
+      rafCallback();
+      getAnimations.mockClear();
+
+      tree.setProps({ columns: nextColumns.slice() });
+      tree.update();
+      rafCallback();
+
+      expect(getAnimations).toBeCalled();
+    });
+
     it('should be updated on the "columns" property change', () => {
       filterActiveAnimations.mockImplementation(() => new Map());
       evalAnimations.mockImplementation(() => new Map());
@@ -141,7 +179,10 @@ describe('TableLayout', () => {
     });
 
     describe('cache table width', () => {
-      const nextColumns = columns.slice(0, 2);
+      const nextColumnsWithSize = width => ([
+        columns[0],
+        { ...columns[1], width },
+      ]);
       const tableDimensions = { scrollWidth: 300, offsetWidth: 200 };
 
       it('should not reset width if scroll width changed', () => {
@@ -156,9 +197,9 @@ describe('TableLayout', () => {
           .mockReturnValue(tableDimensions);
         filterActiveAnimations.mockImplementation(() => new Map());
 
-        tree.setProps({ columns: nextColumns });
+        tree.setProps({ columns: nextColumnsWithSize(200) });
         rafCallback();
-        tree.setProps({ columns: nextColumns.slice() });
+        tree.setProps({ columns: nextColumnsWithSize(100) });
         tree.update();
         rafCallback();
 
@@ -179,9 +220,9 @@ describe('TableLayout', () => {
           .mockReturnValue(tableDimensions);
         filterActiveAnimations.mockImplementation(() => new Map());
 
-        tree.setProps({ columns: nextColumns });
+        tree.setProps({ columns: nextColumnsWithSize(200) });
         rafCallback();
-        tree.setProps({ columns: nextColumns.slice() });
+        tree.setProps({ columns: nextColumnsWithSize(100) });
         rafCallback();
 
         expect(getAnimations).toHaveBeenCalledTimes(2);
@@ -201,7 +242,7 @@ describe('TableLayout', () => {
           .mockReturnValue(tableDimensions);
         filterActiveAnimations.mockImplementation(() => new Map());
 
-        tree.setProps({ columns: nextColumns });
+        tree.setProps({ columns: nextColumnsWithSize(200) });
         rafCallback();
         tree.setProps({ columns: columns.slice(1) });
         rafCallback();
@@ -223,7 +264,7 @@ describe('TableLayout', () => {
           .mockReturnValue(tableDimensions);
         filterActiveAnimations.mockImplementation(() => new Map());
 
-        tree.setProps({ columns: nextColumns });
+        tree.setProps({ columns: nextColumnsWithSize(200) });
         rafCallback();
         tree.setProps({ columns: columns.slice(0, 1) });
         rafCallback();
diff --git a/packages/dx-react-grid/src/components/table-layout.tsx b/packages/dx-react-grid/src/components/table-layout.tsx
index 4c47105282..a97f62cb11 100644
--- a/packages/dx-react-grid/src/components/table-layout.tsx
+++ b/packages/dx-react-grid/src/components/table-layout.tsx
@@ -8,11 +8,12 @@ import {
   TABLE_FLEX_TYPE,
   ColumnAnimationMap,
 } from '@devexpress/dx-grid-core';
+import { shallowEqual } from '@devexpress/dx-core';
 import { TableLayoutCoreProps, TableLayoutCoreState } from '../types';
 
 class TableLayoutBase extends React.PureComponent<TableLayoutCoreProps, TableLayoutCoreState> {
   animations: ColumnAnimationMap;
-  savedScrolldWidth: { [key: number]: number };
+  savedScrollWidth: { [key: number]: number };
   savedOffsetWidth = -1;
   tableRef: React.RefObject<HTMLTableElement>;
   raf = -1;
@@ -25,15 +26,30 @@ class TableLayoutBase extends React.PureComponent<TableLayoutCoreProps, TableLay
     };
 
     this.animations = new Map();
-    this.savedScrolldWidth = {};
+    this.savedScrollWidth = {};
     this.tableRef = React.createRef();
   }
 
   componentDidUpdate(prevProps) {
     const { columns } = this.props;
     const { columns: prevColumns } = prevProps;
+    const { animationState } = this.state;
+
+    const activeAnimationExists = !shallowEqual(columns, prevColumns)
+      || !!animationState.size || !!this.animations.size;
 
+    // NOTE: animation should be recomputed only when columns are changed or
+    // an active animation is in progress. Otherwise it will be recalculated on
+    // each scroll event.
+    if (activeAnimationExists) {
+      this.processAnimation(prevColumns);
+    }
+  }
+
+  processAnimation(prevColumns) {
+    const { columns } = this.props;
     const tableWidth = this.getTableWidth(prevColumns, columns);
+
     this.animations = getAnimations(prevColumns, columns, tableWidth, this.animations);
 
     cancelAnimationFrame(this.raf);
@@ -45,16 +61,16 @@ class TableLayoutBase extends React.PureComponent<TableLayoutCoreProps, TableLay
     const { animationState } = this.state;
 
     const widthChanged = this.savedOffsetWidth !== offsetWidth
-      || !this.savedScrolldWidth[columns.length];
+      || !this.savedScrollWidth[columns.length];
     const columnCountChanged = columns.length !== prevColumns.length;
 
     if (columnCountChanged || (widthChanged && !animationState.size)) {
-      this.savedScrolldWidth = {};
-      this.savedScrolldWidth[columns.length] = scrollWidth;
+      this.savedScrollWidth = {};
+      this.savedScrollWidth[columns.length] = scrollWidth;
       this.savedOffsetWidth = offsetWidth;
     }
 
-    return this.savedScrolldWidth[columns.length];
+    return this.savedScrollWidth[columns.length];
   }
 
   getColumns() {
@@ -65,6 +81,8 @@ class TableLayoutBase extends React.PureComponent<TableLayoutCoreProps, TableLay
 
     const isFixedWidth = columns.filter(column => column.width === undefined).length === 0;
     if (isFixedWidth) {
+      // presumably a flex column added here instead of in a getter in the Table plugin
+      // to make sure that all manipulations on taleColumns have already done earlier
       result = [...result, { key: TABLE_FLEX_TYPE.toString(), type: TABLE_FLEX_TYPE }];
     }
 
diff --git a/packages/dx-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.tsx.snap b/packages/dx-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.tsx.snap
index e4a4de1bec..fc557e3804 100644
--- a/packages/dx-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.tsx.snap
+++ b/packages/dx-react-grid/src/components/table-layout/__snapshots__/virtual-table-layout.test.tsx.snap
@@ -5,866 +5,756 @@ exports[`VirtualTableLayout should render correct layout 1`] = `
   onScroll={[Function]}
   style={
     Object {
-      "height": "100px",
+      "height": 100,
     }
   }
 >
-  <RefHolder>
-    <headTableComponent
-      style={
-        Object {
-          "minWidth": "400px",
-        }
-      }
-      tableRef={
-        Object {
-          "current": null,
-        }
-      }
-    >
-      <ColumnGroup
-        columns={
-          Array [
-            Object {
-              "column": Object {
-                "name": "a",
-              },
-              "key": "a",
-              "width": 160,
+  <VirtualTableLayoutBlock
+    blockRefsHandler={[Function]}
+    bodyComponent={[Function]}
+    cellComponent={[Function]}
+    collapsedGrid={
+      Object {
+        "columns": Array [
+          Object {
+            "column": Object {
+              "name": "a",
             },
-            Object {
-              "column": Object {
-                "name": "b",
-              },
-              "key": "b",
-              "width": 160,
+            "key": "a",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "b",
             },
-            Object {
-              "column": Object {
-                "name": "c",
-              },
-              "key": "c",
-              "width": 160,
+            "key": "b",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "c",
             },
-            Object {
-              "column": Object {
-                "name": "d",
-              },
-              "key": "d",
-              "width": 160,
+            "key": "c",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "d",
+            },
+            "key": "d",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "e",
             },
-            Object {
-              "column": Object {
-                "name": "e",
+            "key": "e",
+            "width": 160,
+          },
+        ],
+        "rows": Array [
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "a",
+                  },
+                  "key": "a",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "b",
+                  },
+                  "key": "b",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "c",
+                  },
+                  "key": "c",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "d",
+                  },
+                  "key": "d",
+                },
               },
-              "key": "e",
-              "width": 160,
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "e",
+                  },
+                  "key": "e",
+                },
+              },
+            ],
+            "row": Object {
+              "key": 1,
             },
-          ]
-        }
-      />
-      <headComponent>
-        <RefHolder
-          key="1"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
-                  },
-                },
-              ]
-            }
-            row={
-              Object {
-                "key": 1,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-      </headComponent>
-    </headTableComponent>
-  </RefHolder>
-  <RefHolder>
-    <tableComponent
-      style={
-        Object {
-          "marginBottom": "600px",
-          "minWidth": "400px",
-        }
+          },
+        ],
       }
-      tableRef={
-        Object {
-          "current": null,
-        }
+    }
+    minColumnWidth={120}
+    name="header"
+    rowComponent={[Function]}
+    rowRefsHandler={[Function]}
+    tableComponent={[Function]}
+    tableRef={
+      Object {
+        "current": null,
       }
-    >
-      <ColumnGroup
-        columns={
-          Array [
-            Object {
-              "column": Object {
-                "name": "a",
-              },
-              "key": "a",
-              "width": 160,
+    }
+  />
+  <VirtualTableLayoutBlock
+    blockRefsHandler={[Function]}
+    bodyComponent={[Function]}
+    cellComponent={[Function]}
+    collapsedGrid={
+      Object {
+        "columns": Array [
+          Object {
+            "column": Object {
+              "name": "a",
             },
-            Object {
-              "column": Object {
-                "name": "b",
-              },
-              "key": "b",
-              "width": 160,
+            "key": "a",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "b",
             },
-            Object {
-              "column": Object {
-                "name": "c",
-              },
-              "key": "c",
-              "width": 160,
+            "key": "b",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "c",
             },
-            Object {
-              "column": Object {
-                "name": "d",
+            "key": "c",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "d",
+            },
+            "key": "d",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "e",
+            },
+            "key": "e",
+            "width": 160,
+          },
+        ],
+        "rows": Array [
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "a",
+                  },
+                  "key": "a",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "b",
+                  },
+                  "key": "b",
+                },
               },
-              "key": "d",
-              "width": 160,
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "c",
+                  },
+                  "key": "c",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "d",
+                  },
+                  "key": "d",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "e",
+                  },
+                  "key": "e",
+                },
+              },
+            ],
+            "row": Object {
+              "key": 1,
             },
-            Object {
-              "column": Object {
-                "name": "e",
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "a",
+                  },
+                  "key": "a",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "b",
+                  },
+                  "key": "b",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "c",
+                  },
+                  "key": "c",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "d",
+                  },
+                  "key": "d",
+                },
               },
-              "key": "e",
-              "width": 160,
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "e",
+                  },
+                  "key": "e",
+                },
+              },
+            ],
+            "row": Object {
+              "key": 2,
             },
-          ]
-        }
-      />
-      <bodyComponent>
-        <RefHolder
-          key="1"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
-                  },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "c",
+                  },
+                  "key": "c",
                 },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-              ]
-            }
-            row={
-              Object {
-                "key": 1,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="2"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+            ],
+            "row": Object {
+              "key": 3,
+            },
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 2,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="3"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+            ],
+            "row": Object {
+              "key": 4,
+            },
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 3,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="4"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+            ],
+            "row": Object {
+              "key": 5,
+            },
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 4,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="5"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-              ]
-            }
-            row={
+              },
+            ],
+            "row": Object {
+              "key": 6,
+            },
+          },
+          Object {
+            "cells": Array [
               Object {
-                "key": 5,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="6"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 6,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="7"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+            ],
+            "row": Object {
+              "key": 7,
+            },
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 7,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="8"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
+                    "name": "e",
                   },
+                  "key": "e",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+            ],
+            "row": Object {
+              "key": 8,
+            },
+          },
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "a",
                   },
+                  "key": "a",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "b",
                   },
+                  "key": "b",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 8,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-        <RefHolder
-          key="9"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
+                    "name": "c",
                   },
+                  "key": "c",
                 },
-                Object {
-                  "colSpan": 1,
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
                   "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
+                    "name": "d",
                   },
+                  "key": "d",
                 },
-              ]
-            }
-            row={
+              },
               Object {
-                "key": 9,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-      </bodyComponent>
-    </tableComponent>
-  </RefHolder>
-  <RefHolder>
-    <footerTableComponent
-      style={
-        Object {
-          "minWidth": "400px",
-        }
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "e",
+                  },
+                  "key": "e",
+                },
+              },
+            ],
+            "row": Object {
+              "key": 9,
+            },
+          },
+        ],
       }
-      tableRef={
-        Object {
-          "current": null,
-        }
+    }
+    marginBottom={600}
+    minColumnWidth={120}
+    name="body"
+    rowComponent={[Function]}
+    rowRefsHandler={[Function]}
+    tableComponent={[Function]}
+    tableRef={
+      Object {
+        "current": null,
       }
-    >
-      <ColumnGroup
-        columns={
-          Array [
-            Object {
-              "column": Object {
-                "name": "a",
-              },
-              "key": "a",
-              "width": 160,
+    }
+  />
+  <VirtualTableLayoutBlock
+    blockRefsHandler={[Function]}
+    bodyComponent={[Function]}
+    cellComponent={[Function]}
+    collapsedGrid={
+      Object {
+        "columns": Array [
+          Object {
+            "column": Object {
+              "name": "a",
             },
-            Object {
-              "column": Object {
-                "name": "b",
-              },
-              "key": "b",
-              "width": 160,
+            "key": "a",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "b",
             },
-            Object {
-              "column": Object {
-                "name": "c",
-              },
-              "key": "c",
-              "width": 160,
+            "key": "b",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "c",
             },
-            Object {
-              "column": Object {
-                "name": "d",
-              },
-              "key": "d",
-              "width": 160,
+            "key": "c",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "d",
+            },
+            "key": "d",
+            "width": 160,
+          },
+          Object {
+            "column": Object {
+              "name": "e",
             },
-            Object {
-              "column": Object {
-                "name": "e",
+            "key": "e",
+            "width": 160,
+          },
+        ],
+        "rows": Array [
+          Object {
+            "cells": Array [
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "a",
+                  },
+                  "key": "a",
+                },
               },
-              "key": "e",
-              "width": 160,
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "b",
+                  },
+                  "key": "b",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "c",
+                  },
+                  "key": "c",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "d",
+                  },
+                  "key": "d",
+                },
+              },
+              Object {
+                "colSpan": 1,
+                "column": Object {
+                  "column": Object {
+                    "name": "e",
+                  },
+                  "key": "e",
+                },
+              },
+            ],
+            "row": Object {
+              "key": 1,
             },
-          ]
-        }
-      />
-      <footerComponent>
-        <RefHolder
-          key="1"
-        >
-          <VirtualRowLayout
-            cellComponent={[Function]}
-            cells={
-              Array [
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "a",
-                    },
-                    "key": "a",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "b",
-                    },
-                    "key": "b",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "c",
-                    },
-                    "key": "c",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "d",
-                    },
-                    "key": "d",
-                  },
-                },
-                Object {
-                  "colSpan": 1,
-                  "column": Object {
-                    "column": Object {
-                      "name": "e",
-                    },
-                    "key": "e",
-                  },
-                },
-              ]
-            }
-            row={
-              Object {
-                "key": 1,
-              }
-            }
-            rowComponent={[Function]}
-          />
-        </RefHolder>
-      </footerComponent>
-    </footerTableComponent>
-  </RefHolder>
+          },
+        ],
+      }
+    }
+    minColumnWidth={120}
+    name="footer"
+    rowComponent={[Function]}
+    rowRefsHandler={[Function]}
+    tableComponent={[Function]}
+    tableRef={
+      Object {
+        "current": null,
+      }
+    }
+  />
 </containerComponent>
 `;
diff --git a/packages/dx-react-grid/src/components/table-layout/static-table-layout.tsx b/packages/dx-react-grid/src/components/table-layout/static-table-layout.tsx
index 4a39960e3e..b51309bf8f 100644
--- a/packages/dx-react-grid/src/components/table-layout/static-table-layout.tsx
+++ b/packages/dx-react-grid/src/components/table-layout/static-table-layout.tsx
@@ -32,6 +32,13 @@ export class StaticTableLayout extends React.PureComponent<TableLayoutProps & ty
       tableRef,
     } = this.props;
 
+    const commonProps = {
+      columns,
+      rowComponent,
+      cellComponent,
+      getCellColSpan,
+    };
+
     return (
       <Container>
         <Table
@@ -42,29 +49,20 @@ export class StaticTableLayout extends React.PureComponent<TableLayoutProps & ty
           {!!headerRows.length && (
             <RowsBlockLayout
               rows={headerRows}
-              columns={columns}
               blockComponent={headComponent}
-              rowComponent={rowComponent}
-              cellComponent={cellComponent}
-              getCellColSpan={getCellColSpan}
+              {...commonProps}
             />
           )}
           <RowsBlockLayout
             rows={bodyRows}
-            columns={columns}
             blockComponent={bodyComponent}
-            rowComponent={rowComponent}
-            cellComponent={cellComponent}
-            getCellColSpan={getCellColSpan}
+            {...commonProps}
           />
           {!!footerRows.length && (
             <RowsBlockLayout
               rows={footerRows}
-              columns={columns}
               blockComponent={footerComponent}
-              rowComponent={rowComponent}
-              cellComponent={cellComponent}
-              getCellColSpan={getCellColSpan}
+              {...commonProps}
             />
           )}
         </Table>
diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-row-layout.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-row-layout.tsx
index b8501c788b..d14d2c2c36 100644
--- a/packages/dx-react-grid/src/components/table-layout/virtual-row-layout.tsx
+++ b/packages/dx-react-grid/src/components/table-layout/virtual-row-layout.tsx
@@ -6,6 +6,7 @@ export class VirtualRowLayout extends React.Component<VirtualRowLayoutProps> {
   shouldComponentUpdate(nextProps) {
     const { cells: prevCells, row: prevRow } = this.props;
     const { cells: nextCells, row: nextRow } = nextProps;
+
     if (prevRow !== nextRow || prevCells.length !== nextCells.length) {
       return true;
     }
@@ -17,6 +18,7 @@ export class VirtualRowLayout extends React.Component<VirtualRowLayoutProps> {
 
     return propsAreNotEqual;
   }
+
   render() {
     const { row, cells, rowComponent: Row, cellComponent: Cell } = this.props;
     return (
diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout-block.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout-block.tsx
new file mode 100644
index 0000000000..0c4f7a4747
--- /dev/null
+++ b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout-block.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { RefHolder } from '@devexpress/dx-react-core';
+import { ColumnGroup } from './column-group';
+import { VirtualTableLayoutBlockProps } from '../../types';
+import { VirtualRowLayout } from './virtual-row-layout';
+
+// tslint:disable-next-line: max-line-length
+export class VirtualTableLayoutBlock extends React.PureComponent<VirtualTableLayoutBlockProps, any> {
+  static defaultProps = {
+    blockRefsHandler: () => {},
+    rowRefsHandler: () => {},
+    tableRef: React.createRef(),
+  };
+
+  render() {
+    const {
+      name,
+      tableRef,
+      collapsedGrid,
+      minWidth,
+      blockRefsHandler,
+      rowRefsHandler,
+      tableComponent: Table,
+      bodyComponent: Body,
+      cellComponent,
+      rowComponent,
+      marginBottom,
+    } = this.props;
+
+    return (
+      <RefHolder
+        ref={ref => blockRefsHandler(name, ref)}
+      >
+        <Table
+          tableRef={tableRef}
+          style={{
+            minWidth: `${minWidth}px`,
+            ...marginBottom ? { marginBottom: `${marginBottom}px` } : null,
+          }}
+        >
+          <ColumnGroup
+            columns={collapsedGrid.columns}
+          />
+          <Body>
+            {collapsedGrid.rows.map((visibleRow) => {
+              const { row, cells = [] } = visibleRow;
+
+              return (
+                <RefHolder
+                  key={row.key}
+                  ref={ref => rowRefsHandler(row, ref)}
+                >
+                  <VirtualRowLayout
+                    row={row}
+                    cells={cells}
+                    rowComponent={rowComponent}
+                    cellComponent={cellComponent}
+                  />
+                </RefHolder>
+              );
+            })}
+          </Body>
+        </Table>
+      </RefHolder>
+    );
+  }
+
+}
diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx
index bf3d052c4b..e36cdd4de8 100644
--- a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx
+++ b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.test.tsx
@@ -4,8 +4,7 @@ import { shallow, mount } from 'enzyme';
 import { isEdgeBrowser } from '@devexpress/dx-core';
 import { Sizer } from '@devexpress/dx-react-core';
 import {
-  getCollapsedGrid,
-  getColumnWidthGetter,
+  getCollapsedGrids,
   TABLE_FLEX_TYPE,
 } from '@devexpress/dx-grid-core';
 import { setupConsole } from '@devexpress/dx-testing';
@@ -22,7 +21,7 @@ jest.mock('@devexpress/dx-core', () => {
 });
 jest.mock('@devexpress/dx-grid-core', () => {
   const actual = require.requireActual('@devexpress/dx-grid-core');
-  jest.spyOn(actual, 'getCollapsedGrid');
+  jest.spyOn(actual, 'getCollapsedGrids');
   jest.spyOn(actual, 'getColumnWidthGetter');
   return actual;
 });
@@ -81,10 +80,10 @@ const defaultProps = {
     { key: 8 },
     { key: 9 },
   ],
+  loadedRowsStart: 0,
+  totalRowCount: 9,
   containerComponent: props => <div {...props} />,
-  // eslint-disable-next-line react/prop-types
   headTableComponent: ({ tableRef, ...props }) => <table {...props} />,
-  // eslint-disable-next-line react/prop-types
   tableComponent: ({ tableRef, ...props }) => <table {...props} />,
   headComponent: props => <thead {...props} />,
   bodyComponent: props => <tbody {...props} />,
@@ -150,11 +149,11 @@ describe('VirtualTableLayout', () => {
     ];
     const rows = [{ key: 0 }];
 
-    getCollapsedGrid
+    getCollapsedGrids
       .mockImplementationOnce((args) => {
-        const result = require.requireActual('@devexpress/dx-grid-core').getCollapsedGrid(args);
+        const result = require.requireActual('@devexpress/dx-grid-core').getCollapsedGrids(args);
 
-        expect(result.columns.find(col => col.key === 'col_flex').width)
+        expect(result.bodyGrid.columns.find(col => col.key === 'col_flex').width)
           .toBe(null);
 
         return result;
@@ -174,34 +173,34 @@ describe('VirtualTableLayout', () => {
       const tree = mount((
         <VirtualTableLayout
           {...defaultProps}
-          headerRows={defaultProps.bodyRows.slice(0, 1)}
-          footerRows={defaultProps.bodyRows.slice(0, 1)}
+          headerRows={defaultProps.bodyRows.slice(0, 2)}
+          footerRows={defaultProps.bodyRows.slice(0, 2)}
         />
       ));
 
       expect(tree.find(defaultProps.containerComponent).props().style)
-        .toMatchObject({ height: `${defaultProps.height}px` });
+        .toMatchObject({ height: defaultProps.height });
 
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 3][0])
-        .toMatchObject({
-          top: 0,
-          left: 0,
-          height: defaultProps.estimatedRowHeight,
-          width: 400,
-        });
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 2][0])
-        .toMatchObject({
-          top: 0,
-          left: 0,
-          height: 120 - (defaultProps.estimatedRowHeight * 2),
-          width: 400,
-        });
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 1][0])
+      expect(getCollapsedGrids).toBeCalledTimes(2);
+      expect(getCollapsedGrids.mock.calls[getCollapsedGrids.mock.calls.length - 1][0])
         .toMatchObject({
-          top: 0,
-          left: 0,
-          height: defaultProps.estimatedRowHeight,
-          width: 400,
+          viewportLeft: 0,
+          containerWidth: 400,
+          visibleRowBoundaries: {
+            header: {
+              start: 0,
+              end: 0,
+            },
+            body: {
+              start: 0,
+              end: 0,
+            },
+            footer: {
+              start: 0,
+              end: 0,
+            },
+            viewportTop: 0,
+          },
         });
     });
 
@@ -227,22 +226,25 @@ describe('VirtualTableLayout', () => {
       ));
 
       simulateScroll(tree, { scrollTop: 100, scrollLeft: 50 });
-      const calls = getCollapsedGrid.mock.calls;
 
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 3][0])
-        .toMatchObject({
-          top: 0,
-          left: 50,
-        });
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 2][0])
-        .toMatchObject({
-          top: 100,
-          left: 50,
-        });
-      expect(getCollapsedGrid.mock.calls[getCollapsedGrid.mock.calls.length - 1][0])
+      expect(getCollapsedGrids.mock.calls[getCollapsedGrids.mock.calls.length - 1][0])
         .toMatchObject({
-          top: 0,
-          left: 50,
+          viewportLeft: 50,
+          visibleRowBoundaries: {
+            header: {
+              start: 0,
+              end: 0,
+            },
+            body: {
+              start: 2,
+              end: 4,
+            },
+            footer: {
+              start: 0,
+              end: 0,
+            },
+            viewportTop: 100,
+          },
         });
     });
 
@@ -254,14 +256,14 @@ describe('VirtualTableLayout', () => {
             headerRows={defaultProps.bodyRows.slice(0, 1)}
           />
         ));
-        const initialCallsCount = getCollapsedGrid.mock.calls.length;
+        const initialCallsCount = getCollapsedGrids.mock.calls.length;
 
         simulateScroll(tree, scrollArgs);
 
         if (shouldRerender) {
-          expect(getCollapsedGrid.mock.calls.length).toBeGreaterThan(initialCallsCount);
+          expect(getCollapsedGrids.mock.calls.length).toBeGreaterThan(initialCallsCount);
         } else {
-          expect(getCollapsedGrid.mock.calls.length).toBe(initialCallsCount);
+          expect(getCollapsedGrids.mock.calls.length).toBe(initialCallsCount);
         }
       };
 
@@ -316,7 +318,7 @@ describe('VirtualTableLayout', () => {
         { key: 2, height: 10 },
       ];
 
-      getCollapsedGrid
+      getCollapsedGrids
         .mockImplementationOnce((args) => {
           const { getRowHeight } = args;
           expect(getRowHeight(rows[0]))
@@ -324,7 +326,7 @@ describe('VirtualTableLayout', () => {
           expect(getRowHeight(rows[1]))
             .toEqual(10);
 
-          return require.requireActual('@devexpress/dx-grid-core').getCollapsedGrid(args);
+          return require.requireActual('@devexpress/dx-grid-core').getCollapsedGrids(args);
         });
 
       mount((
@@ -354,7 +356,7 @@ describe('VirtualTableLayout', () => {
         />
       ));
 
-      const { getRowHeight } = getCollapsedGrid.mock.calls[0][0];
+      const { getRowHeight } = getCollapsedGrids.mock.calls[0][0];
       expect(getRowHeight(rows[0]))
         .toEqual(50);
       expect(getRowHeight(rows[1]))
@@ -381,78 +383,9 @@ describe('VirtualTableLayout', () => {
       ));
       tree.setProps({ bodyRows: [rows[0]] });
 
-      const { getRowHeight } = getCollapsedGrid.mock.calls[0][0];
+      const { getRowHeight } = getCollapsedGrids.mock.calls[0][0];
       expect(getRowHeight(rows[1]))
         .toEqual(defaultProps.estimatedRowHeight);
     });
-
-    it('should clear row height when headerRows updated', () => {
-      const rows = [
-        { key: 11 },
-        { key: 12 },
-      ];
-
-      findDOMNode.mockImplementation(() => ({
-        getBoundingClientRect: () => ({
-          height: 50,
-        }),
-      }));
-
-      const tree = mount((
-        <VirtualTableLayout
-          {...defaultProps}
-          headerRows={rows.slice(0, 2)}
-          bodyRows={rows.slice(2, 1)}
-        />
-      ));
-      tree.setProps({ headerRows: [rows[0]] });
-
-      const { getRowHeight } = getCollapsedGrid.mock.calls[0][0];
-      expect(getRowHeight(rows[1]))
-        .toEqual(defaultProps.estimatedRowHeight);
-    });
-
-    it('should clear row height when footerRows updated', () => {
-      const rows = [
-        { key: 11 },
-        { key: 12 },
-      ];
-
-      findDOMNode.mockImplementation(() => ({
-        getBoundingClientRect: () => ({
-          height: 50,
-        }),
-      }));
-
-      const tree = mount((
-        <VirtualTableLayout
-          {...defaultProps}
-          bodyRows={rows.slice(2, 1)}
-          footerRows={rows.slice(0, 2)}
-        />
-      ));
-      tree.setProps({ footerRows: [rows[0]] });
-
-      const calls = getCollapsedGrid.mock.calls;
-      const { getRowHeight } = getCollapsedGrid.mock.calls[0][0];
-      expect(getRowHeight(rows[1]))
-        .toEqual(defaultProps.estimatedRowHeight);
-    });
-  });
-
-  it('should use getColumnWidthGetter', () => {
-    const getColumnWidth = () => 0;
-    getColumnWidthGetter.mockImplementationOnce(() => getColumnWidth);
-
-    mount((
-      <VirtualTableLayout
-        {...defaultProps}
-      />
-    ));
-
-    expect(getCollapsedGrid.mock.calls[0][0])
-      .toMatchObject({
-        getColumnWidth,
-      });
   });
 });
diff --git a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx
index 04fc3dd57f..6252142a7e 100644
--- a/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx
+++ b/packages/dx-react-grid/src/components/table-layout/virtual-table-layout.tsx
@@ -1,17 +1,13 @@
 import * as React from 'react';
-import { findDOMNode } from 'react-dom';
-import { isEdgeBrowser, memoize, MemoizedFunction } from '@devexpress/dx-core';
-import { Sizer, RefHolder } from '@devexpress/dx-react-core';
+import { Sizer } from '@devexpress/dx-react-core';
+import { MemoizedFunction, memoize, isEdgeBrowser } from '@devexpress/dx-core';
 import {
-  getCollapsedGrid,
-  TABLE_STUB_TYPE,
-  getColumnWidthGetter,
-  GetColumnWidthFn,
-  TableColumn,
+  TableColumn, GetColumnWidthFn, getCollapsedGrids,
+  getColumnWidthGetter, TABLE_STUB_TYPE, getVisibleRowsBounds, GridRowsBoundaries,
 } from '@devexpress/dx-grid-core';
-import { ColumnGroup } from './column-group';
-import { VirtualRowLayout } from './virtual-row-layout';
-import { VirtualTableLayoutProps, VirtualTableLayoutState } from '../../types';
+import { VirtualTableLayoutState, VirtualTableLayoutProps } from '../../types';
+import { findDOMNode } from 'react-dom';
+import { VirtualTableLayoutBlock } from './virtual-table-layout-block';
 
 const AUTO_HEIGHT = 'auto';
 
@@ -22,6 +18,7 @@ const defaultProps = {
   headTableComponent: () => null,
   footerComponent: () => null,
   footerTableComponent: () => null,
+  ensureNextVirtualPage: () => void 0,
 };
 type PropsType = VirtualTableLayoutProps & typeof defaultProps;
 
@@ -29,23 +26,24 @@ type PropsType = VirtualTableLayoutProps & typeof defaultProps;
 // tslint:disable-next-line: max-line-length
 export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTableLayoutState> {
   static defaultProps = defaultProps;
-  isEdgeBrowser = false;
-  rowRefs: Map<any, any>;
-  blockRefs: Map<any, any>;
   getColumnWidthGetter: MemoizedFunction<[TableColumn[], number, number], GetColumnWidthFn>;
+  rowRefs = new Map();
+  blockRefs = new Map();
+  isEdgeBrowser = false;
 
   constructor(props) {
     super(props);
 
     this.state = {
-      bodyHeight: 0,
-      headerHeight: 0,
-      footerHeight: 0,
       rowHeights: new Map(),
       viewportTop: 0,
       viewportLeft: 0,
-      width: 800,
-      height: 600,
+      containerWidth: 800,
+      containerHeight: 600,
+      height: 0,
+      headerHeight: 0,
+      bodyHeight: 0,
+      footerHeight: 0,
     };
 
     const headerHeight = props.headerRows
@@ -59,13 +57,6 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
       ...this.state,
     };
 
-    this.rowRefs = new Map();
-    this.blockRefs = new Map();
-    this.registerRowRef = this.registerRowRef.bind(this);
-    this.getRowHeight = this.getRowHeight.bind(this);
-    this.updateViewport = this.updateViewport.bind(this);
-    this.handleContainerSizeChange = this.handleContainerSizeChange.bind(this);
-
     this.getColumnWidthGetter = memoize(
       (tableColumns, tableWidth, minColumnWidth) => (
         getColumnWidthGetter(tableColumns, tableWidth, minColumnWidth)
@@ -77,12 +68,12 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     this.isEdgeBrowser = isEdgeBrowser();
 
     this.storeRowHeights();
-    this.storeBloksHeights();
+    this.storeBlockHeights();
   }
 
   componentDidUpdate() {
     this.storeRowHeights();
-    this.storeBloksHeights();
+    this.storeBlockHeights();
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -101,18 +92,35 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     return { rowHeights };
   }
 
-  getRowHeight(row) {
+  getRowHeight = (row) => {
     const { rowHeights } = this.state;
     const { estimatedRowHeight } = this.props;
-    const storedHeight = rowHeights.get(row.key);
-    if (storedHeight !== undefined) return storedHeight;
-    if (row.height) return row.height;
+    if (row) {
+      const storedHeight = rowHeights.get(row.key);
+      if (storedHeight !== undefined) return storedHeight;
+      if (row.height) return row.height;
+    }
     return estimatedRowHeight;
   }
 
+  registerRowRef = (row, ref) => {
+    if (ref === null) {
+      this.rowRefs.delete(row);
+    } else {
+      this.rowRefs.set(row, ref);
+    }
+  }
+
+  registerBlockRef = (name, ref) => {
+    if (ref === null) {
+      this.blockRefs.delete(name);
+    } else {
+      this.blockRefs.set(name, ref);
+    }
+  }
+
   storeRowHeights() {
     const rowsWithChangedHeights = Array.from(this.rowRefs.entries())
-      // eslint-disable-next-line react/no-find-dom-node
       .map(([row, ref]) => [row, findDOMNode(ref)])
       .filter(([, node]) => !!node)
       .map(([row, node]) => [row, node.getBoundingClientRect().height])
@@ -130,7 +138,7 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     }
   }
 
-  storeBloksHeights() {
+  storeBlockHeights() {
     const getBlockHeight = blockName => (this.blockRefs.get(blockName)
       ? (findDOMNode(this.blockRefs.get(blockName)) as HTMLElement).getBoundingClientRect().height
       : 0
@@ -156,20 +164,31 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     }
   }
 
-  registerRowRef(row, ref) {
-    if (ref === null) {
-      this.rowRefs.delete(row);
-    } else {
-      this.rowRefs.set(row, ref);
+  updateViewport = (e, visibleRowBoundaries, ensureNextVirtualPage) => {
+    const node = e.target;
+
+    if (this.shouldSkipScrollEvent(e)) {
+      return;
     }
+
+    const { estimatedRowHeight } = this.props;
+    const { containerHeight } = this.state;
+    const { scrollTop: viewportTop, scrollLeft: viewportLeft } = node;
+    ensureNextVirtualPage({
+      estimatedRowHeight,
+      visibleRowBoundaries,
+      viewportTop,
+      containerHeight,
+    });
+
+    this.setState({
+      viewportTop,
+      viewportLeft,
+    });
   }
 
-  registerBlockRef(name, ref) {
-    if (ref === null) {
-      this.blockRefs.delete(name);
-    } else {
-      this.blockRefs.set(name, ref);
-    }
+  handleContainerSizeChange = ({ width, height }) => {
+    this.setState({ containerWidth: width, containerHeight: height });
   }
 
   shouldSkipScrollEvent(e) {
@@ -193,77 +212,48 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
     return false;
   }
 
-  updateViewport(e) {
-    const node = e.target;
-
-    if (this.shouldSkipScrollEvent(e)) {
-      return;
-    }
-
-    this.setState({
-      viewportTop: node.scrollTop,
-      viewportLeft: node.scrollLeft,
-    });
-  }
-
-  handleContainerSizeChange({ width, height }) {
-    this.setState({ width, height });
-  }
-
-  renderRowsBlock(name, collapsedGrid, Table, Body, blockRef?, marginBottom?) {
+  getVisibleBoundaries() {
     const {
-      minWidth,
-      rowComponent,
-      cellComponent,
+      loadedRowsStart,
+      bodyRows,
+      headerRows,
+      footerRows,
+      estimatedRowHeight,
     } = this.props;
 
-    const tableRef = blockRef || React.createRef();
-
-    return (
-      <RefHolder
-        ref={ref => this.registerBlockRef(name, ref)}
-      >
-        <Table
-          tableRef={tableRef}
-          style={{
-            minWidth: `${minWidth}px`,
-            ...marginBottom ? { marginBottom: `${marginBottom}px` } : null,
-          }}
-        >
-          <ColumnGroup
-            columns={collapsedGrid.columns}
-          />
-          <Body>
-            {collapsedGrid.rows.map((visibleRow) => {
-              const { row, cells = [] } = visibleRow;
-              return (
-                <RefHolder
-                  key={row.key}
-                  ref={ref => this.registerRowRef(row, ref)}
-                >
-                  <VirtualRowLayout
-                    row={row}
-                    cells={cells}
-                    rowComponent={rowComponent}
-                    cellComponent={cellComponent}
-                  />
-                </RefHolder>
-              );
-            })}
-          </Body>
-        </Table>
-      </RefHolder>
+    return getVisibleRowsBounds(
+      this.state, { loadedRowsStart, bodyRows, headerRows, footerRows },
+      estimatedRowHeight, this.getRowHeight,
     );
   }
 
-  render() {
+  getCollapsedGrids(visibleRowBoundaries: GridRowsBoundaries) {
+    const { viewportLeft, containerWidth } = this.state;
     const {
+      headerRows, bodyRows, footerRows,
+      columns, loadedRowsStart, totalRowCount,
+      getCellColSpan, minColumnWidth,
+    } = this.props;
+    const getColumnWidth = this.getColumnWidthGetter(columns, containerWidth, minColumnWidth!);
+
+    return getCollapsedGrids({
       headerRows,
       bodyRows,
       footerRows,
       columns,
-      minColumnWidth,
-      height: propHeight,
+      loadedRowsStart,
+      totalRowCount,
+      getCellColSpan,
+      viewportLeft,
+      containerWidth,
+      visibleRowBoundaries,
+      getColumnWidth,
+      getRowHeight: this.getRowHeight,
+    });
+  }
+
+  render() {
+    const {
       containerComponent: Container,
       headTableComponent: HeadTable,
       footerTableComponent: FootTable,
@@ -271,76 +261,75 @@ export class VirtualTableLayout extends React.PureComponent<PropsType, VirtualTa
       headComponent: Head,
       bodyComponent: Body,
       footerComponent: Footer,
-      getCellColSpan,
       tableRef,
+      height,
+      headerRows,
+      footerRows,
+      ensureNextVirtualPage,
+      minColumnWidth,
+      cellComponent,
+      rowComponent,
     } = this.props;
-
     const {
-      viewportLeft,
-      viewportTop,
+      containerHeight,
       headerHeight,
       bodyHeight,
       footerHeight,
-      width,
-      height,
     } = this.state;
 
-    const getColumnWidth = this.getColumnWidthGetter(columns, width, minColumnWidth!);
-    const getColSpan = (
-      tableRow, tableColumn,
-    ) => getCellColSpan!({ tableRow, tableColumn, tableColumns: columns });
-
-    /* tslint:disable object-shorthand-properties-first */
-    const collapsedHeaderGrid = getCollapsedGrid({
-      rows: headerRows,
-      columns,
-      top: 0,
-      left: viewportLeft,
-      width,
-      height: headerHeight,
-      getColumnWidth,
-      getRowHeight: this.getRowHeight,
-      getColSpan,
-    });
-    const collapsedBodyGrid = getCollapsedGrid({
-      rows: bodyRows,
-      columns,
-      top: viewportTop,
-      left: viewportLeft,
-      width,
-      height: height - headerHeight - footerHeight,
-      getColumnWidth,
-      getRowHeight: this.getRowHeight,
-      getColSpan,
-    });
-    const collapsedFooterGrid = getCollapsedGrid({
-      rows: footerRows,
-      columns,
-      top: 0,
-      left: viewportLeft,
-      width,
-      height: footerHeight,
-      getColumnWidth,
-      getRowHeight: this.getRowHeight,
-      getColSpan,
-    });
-    /* tslint:enable object-shorthand-properties-first */
+    const visibleRowBoundaries = this.getVisibleBoundaries();
+    const collapsedGrids = this.getCollapsedGrids(visibleRowBoundaries);
+    const commonProps = {
+      cellComponent,
+      rowComponent,
+      minColumnWidth,
+      blockRefsHandler: this.registerBlockRef,
+      rowRefsHandler: this.registerRowRef,
+    };
 
-    /* tslint:disable max-line-length */
     return (
       <Sizer
         onSizeChange={this.handleContainerSizeChange}
         containerComponent={Container}
         style={{
-          ...(propHeight === AUTO_HEIGHT ? null : { height: `${propHeight}px` }),
+          ...(height === AUTO_HEIGHT ? null : { height }),
         }}
-        onScroll={this.updateViewport}
+        onScroll={
+          e => this.updateViewport(e, visibleRowBoundaries, ensureNextVirtualPage)
+        }
       >
-        {!!headerRows.length && this.renderRowsBlock('header', collapsedHeaderGrid, HeadTable, Head)}
-        {this.renderRowsBlock('body', collapsedBodyGrid, Table, Body, tableRef, Math.max(0, height - headerHeight - bodyHeight - footerHeight))}
-        {!!footerRows.length && this.renderRowsBlock('footer', collapsedFooterGrid, FootTable, Footer)}
+        {
+          (!!headerRows.length) && (
+            <VirtualTableLayoutBlock
+              {...commonProps}
+              name="header"
+              collapsedGrid={collapsedGrids.headerGrid}
+              tableComponent={HeadTable}
+              bodyComponent={Head}
+            />
+          )
+        }
+        <VirtualTableLayoutBlock
+          {...commonProps}
+          name="body"
+          collapsedGrid={collapsedGrids.bodyGrid}
+          tableComponent={Table}
+          bodyComponent={Body}
+          tableRef={tableRef}
+          marginBottom={Math.max(0, containerHeight - headerHeight - bodyHeight - footerHeight)}
+        />
+        {
+          (!!footerRows.length) && (
+            <VirtualTableLayoutBlock
+              {...commonProps}
+              name="footer"
+              collapsedGrid={collapsedGrids.footerGrid}
+              tableComponent={FootTable}
+              bodyComponent={Footer}
+            />
+          )
+        }
       </Sizer>
     );
-    /* tslint:enable max-line-length */
   }
 }
diff --git a/packages/dx-react-grid/src/index.ts b/packages/dx-react-grid/src/index.ts
index 8890af5432..463b66989e 100644
--- a/packages/dx-react-grid/src/index.ts
+++ b/packages/dx-react-grid/src/index.ts
@@ -42,12 +42,15 @@ export * from './plugins/summary-state';
 export * from './plugins/integrated-summary';
 export * from './plugins/custom-summary';
 export * from './plugins/table-summary-row';
+export * from './plugins/virtual-table/virtual-table-state';
 
 export * from './components/table-layout';
 export * from './components/table-layout/virtual-table-layout';
 export * from './components/table-layout/static-table-layout';
 export * from './components/group-panel-layout';
 
-export * from './utils/virtual-table';
+export * from './plugins/virtual-table/virtual-table';
 
 export * from './types/tables/virtual-table.types';
+
+export * from './utils/remote-rows-cache';
diff --git a/packages/dx-react-grid/src/plugins/grid-core.tsx b/packages/dx-react-grid/src/plugins/grid-core.tsx
index f69b8db6e3..caaa3f0cd8 100644
--- a/packages/dx-react-grid/src/plugins/grid-core.tsx
+++ b/packages/dx-react-grid/src/plugins/grid-core.tsx
@@ -17,6 +17,8 @@ export class GridCore extends React.PureComponent<GridProps> {
 
     return (
       <Plugin>
+        <Getter name="skip" value={0} />
+        <Getter name="loadedRowsStart" value={0} />
         <Getter name="rows" value={rows} />
         <Getter name="getRowId" value={rowIdGetter(getRowId!, rows)} />
         <Getter name="columns" value={columns} />
diff --git a/packages/dx-react-grid/src/plugins/table-header-row.tsx b/packages/dx-react-grid/src/plugins/table-header-row.tsx
index 8f9dc9e28b..46581812a6 100644
--- a/packages/dx-react-grid/src/plugins/table-header-row.tsx
+++ b/packages/dx-react-grid/src/plugins/table-header-row.tsx
@@ -15,7 +15,7 @@ import { TableHeaderRowProps, TableCellProps, TableRowProps } from '../types';
 
 const tableHeaderRowsComputed = (
   { tableHeaderRows }: Getters,
-) => tableRowsWithHeading(tableHeaderRows);
+) => tableRowsWithHeading(tableHeaderRows || []);
 
 class TableHeaderRowBase extends React.PureComponent<TableHeaderRowProps> {
   static ROW_TYPE = TABLE_HEADING_TYPE;
diff --git a/packages/dx-react-grid/src/plugins/table.test.tsx b/packages/dx-react-grid/src/plugins/table.test.tsx
index 677dd16043..f30a769ac0 100644
--- a/packages/dx-react-grid/src/plugins/table.test.tsx
+++ b/packages/dx-react-grid/src/plugins/table.test.tsx
@@ -31,6 +31,7 @@ const defaultDeps = {
     rows: [{ field: 1 }],
     getRowId: () => {},
     getCellValue: () => {},
+    isDataLoading: false,
   },
   template: {
     body: undefined,
@@ -88,7 +89,11 @@ describe('Table', () => {
       ));
 
       expect(tableRowsWithDataRows)
-        .toBeCalledWith(defaultDeps.getter.rows, defaultDeps.getter.getRowId);
+        .toBeCalledWith(
+          defaultDeps.getter.rows,
+          defaultDeps.getter.getRowId,
+          defaultDeps.getter.isDataLoading,
+        );
       expect(getComputedState(tree).tableBodyRows)
         .toBe('tableRowsWithDataRows');
     });
diff --git a/packages/dx-react-grid/src/plugins/table.tsx b/packages/dx-react-grid/src/plugins/table.tsx
index 98dc60dd4e..851136a168 100644
--- a/packages/dx-react-grid/src/plugins/table.tsx
+++ b/packages/dx-react-grid/src/plugins/table.tsx
@@ -21,14 +21,14 @@ import {
   TABLE_NODATA_TYPE,
   GridColumnExtension,
 } from '@devexpress/dx-grid-core';
-import { TableProps, Table as TableNS } from '../types';
+import { TableProps, Table as TableNS, TableLayoutProps } from '../types';
 
 const RowPlaceholder = props => <TemplatePlaceholder name="tableRow" params={props} />;
 const CellPlaceholder = props => <TemplatePlaceholder name="tableCell" params={props} />;
 
 const tableHeaderRows = [];
-const tableBodyRowsComputed = ({ rows, getRowId }: Getters) => (
-  tableRowsWithDataRows(rows, getRowId)
+const tableBodyRowsComputed = ({ rows, getRowId, isDataLoading }: Getters) => (
+  tableRowsWithDataRows(rows, getRowId, isDataLoading)
 );
 const tableFooterRows = [];
 
@@ -102,6 +102,7 @@ class TableBase extends React.PureComponent<TableProps> {
         <Getter name="tableFooterRows" value={tableFooterRows} />
         <Getter name="tableColumns" computed={tableColumnsComputed} />
         <Getter name="getTableCellColSpan" value={tableCellColSpanGetter} />
+        <Getter name="visibleBoundaries" value={[]} />
 
         <Template name="body">
           <TemplatePlaceholder name="table" />
@@ -115,23 +116,31 @@ class TableBase extends React.PureComponent<TableProps> {
               tableColumns: columns,
               getTableCellColSpan,
             }) => (
-              <Layout
-                tableComponent={tableComponent}
-                headComponent={headComponent}
-                bodyComponent={bodyComponent}
-                footerComponent={footerComponent}
-                containerComponent={containerComponent}
-                headerRows={headerRows}
-                bodyRows={bodyRows}
-                footerRows={footerRows}
-                columns={columns}
-                rowComponent={RowPlaceholder}
-                cellComponent={CellPlaceholder}
-                getCellColSpan={getTableCellColSpan}
+              <TemplatePlaceholder
+                name="tableLayout"
+                params={{
+                  tableComponent,
+                  headComponent,
+                  bodyComponent,
+                  footerComponent,
+                  containerComponent,
+                  headerRows,
+                  bodyRows,
+                  footerRows,
+                  columns,
+                  rowComponent: RowPlaceholder,
+                  cellComponent: CellPlaceholder,
+                  getCellColSpan: getTableCellColSpan,
+                }}
               />
             )}
           </TemplateConnector>
         </Template>
+        <Template name="tableLayout">
+          {(params: TableLayoutProps) => (
+            <Layout {...params} />
+          )}
+        </Template>
         <Template name="tableCell">
           {(params: TableNS.CellProps) => (
             <TemplateConnector>
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.test.tsx b/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.test.tsx
new file mode 100644
index 0000000000..9faeef9174
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.test.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { PluginHost } from '@devexpress/dx-react-core';
+import { RemoteDataLoader } from './remote-data-loader';
+import { pluginDepsToComponents, executeComputedAction } from '@devexpress/dx-testing';
+import { nextPageReferenceIndex } from '@devexpress/dx-grid-core';
+
+jest.mock('@devexpress/dx-grid-core', () => ({
+  nextPageReferenceIndex: jest.fn(),
+}));
+
+describe('RemoteDataLoader', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('ensureNextVirtualPage action', () => {
+    const createRows = length => Array.from({ length }).map((_, id) => ({ id }));
+    const defaultDeps = {
+      getter: {
+        isDataRemote: true,
+        pageSize: 10,
+        virtualRows: {
+          skip: 0,
+          rows: createRows(20),
+        },
+        loadedRowsStart: 0,
+      },
+      action: {
+        requestNextPage: jest.fn(),
+      },
+    };
+    const payload = {
+      viewportTop: 400,
+      estimatedRowHeight: 20,
+      containerHeight: 100,
+      visibleRowBoundaries: {
+        start: 17,
+        end: 27,
+        viewportTop: 395,
+      },
+    };
+
+    it('should not request next page when remote data is disabled', () => {
+      const deps = {
+        getter: {
+          isDataRemote: false,
+        },
+      };
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps, deps)}
+          <RemoteDataLoader />
+        </PluginHost>
+      ));
+
+      executeComputedAction(tree, actions => actions.ensureNextVirtualPage(payload));
+
+      expect(defaultDeps.action.requestNextPage)
+        .not.toHaveBeenCalled();
+    });
+
+    it('should calculate next page reference index', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <RemoteDataLoader />
+        </PluginHost>
+      ));
+
+      executeComputedAction(tree, actions => actions.ensureNextVirtualPage(payload));
+
+      expect(nextPageReferenceIndex)
+        .toHaveBeenCalledWith(
+          payload,
+          defaultDeps.getter,
+        );
+    });
+
+    it('should invoke requestNextPage action with correct parameter', () => {
+      nextPageReferenceIndex.mockImplementationOnce(() => 'nextPageReferenceIndex');
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <RemoteDataLoader />
+        </PluginHost>
+      ));
+
+      executeComputedAction(tree, actions => actions.ensureNextVirtualPage(payload));
+
+      expect(defaultDeps.action.requestNextPage.mock.calls[0][0])
+        .toMatchObject({ referenceIndex: 'nextPageReferenceIndex' });
+    });
+
+    it('should not invoke requestNextPage action if reference index is null', () => {
+      nextPageReferenceIndex.mockImplementationOnce(() => null);
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <RemoteDataLoader />
+        </PluginHost>
+      ));
+
+      executeComputedAction(tree, actions => actions.ensureNextVirtualPage(payload));
+
+      expect(defaultDeps.action.requestNextPage)
+        .not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.tsx b/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.tsx
new file mode 100644
index 0000000000..a969eaf23a
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/remote-data-loader.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Plugin, Action, Getters, Actions } from '@devexpress/dx-react-core';
+import { nextPageReferenceIndex } from '@devexpress/dx-grid-core';
+
+export class RemoteDataLoader extends React.PureComponent<any, any> {
+  ensureNextVirtualPage = (
+    payload: any,
+    getters: Getters,
+    { requestNextPage }: Actions,
+  ) => {
+    const { isDataRemote } = getters;
+    if (!isDataRemote) {
+      return;
+    }
+
+    const referenceIndex = nextPageReferenceIndex(payload, getters);
+    if (referenceIndex !== null) {
+      requestNextPage({ referenceIndex });
+    }
+  }
+
+  render() {
+    return (
+      <Plugin name="RemoteDataLoader">
+        <Action name="ensureNextVirtualPage" action={this.ensureNextVirtualPage} />
+      </Plugin>
+    );
+  }
+}
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.test.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.test.tsx
new file mode 100644
index 0000000000..314f7efbe8
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.test.tsx
@@ -0,0 +1,197 @@
+import * as React from 'react';
+import {
+  recalculateBounds, calculateRequestedRange,
+  virtualRowsWithCache, trimRowsToInterval,
+  emptyVirtualRows,
+  plainRows,
+  loadedRowsStart,
+} from '@devexpress/dx-grid-core';
+import { PluginHost } from '@devexpress/dx-react-core';
+import { mount } from 'enzyme';
+import {
+  pluginDepsToComponents, getComputedState, executeComputedAction,
+} from '@devexpress/dx-testing';
+import { VirtualTableState } from './virtual-table-state';
+
+jest.mock('@devexpress/dx-grid-core', () => ({
+  ...require.requireActual('@devexpress/dx-grid-core'),
+  virtualRowsWithCache: jest.fn(),
+  plainRows: jest.fn(),
+  loadedRowsStart: jest.fn(),
+}));
+
+const defaultDeps = {
+  getter: {
+    rows: [{ id: 1 }],
+    getRowId: row => row.id,
+  },
+};
+
+const defaultProps = {
+  skip: 100,
+  totalRowCount: 1000,
+  getRows: () => {},
+};
+
+describe('VirtualTableState', () => {
+  beforeEach(() => {
+    virtualRowsWithCache.mockImplementation(() => 'virtualRowsWithCache');
+    plainRows.mockImplementation(() => 'plainRows');
+    loadedRowsStart.mockImplementation(() => 'loadedRowsStart');
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('getters', () => {
+    it('should provide value from "skip" property', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+            skip={200}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).skip)
+        .toBe(200);
+    });
+
+    it('should provide value from "totalRowCount" property', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+            totalRowCount={2000}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).availableRowCount)
+        .toBe(2000);
+    });
+
+    it('should provide cached rows', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+      tree.find(VirtualTableState).setState({ virtualRowsCache: 'virtualRowsCache' });
+      tree.update();
+
+      expect(getComputedState(tree).virtualRowsCache)
+        .toBe('virtualRowsCache');
+    });
+
+    it('should provide rows merged with cached rows', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+      tree.find(VirtualTableState).setState({ virtualRowsCache: 'virtualRowsCache' });
+
+      expect(getComputedState(tree).virtualRows)
+        .toBe('virtualRowsWithCache');
+      expect(virtualRowsWithCache)
+        .toBeCalledWith(
+          defaultProps.skip,
+          defaultDeps.getter.rows,
+          'virtualRowsCache',
+        );
+    });
+
+    it('should provide data rows as plain array', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).rows)
+        .toBe('plainRows');
+      expect(plainRows)
+        .toBeCalledWith('virtualRowsWithCache');
+    });
+
+    it('should provide loaded rows start index', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTableState
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).loadedRowsStart)
+        .toBe('loadedRowsStart');
+      expect(plainRows)
+        .toBeCalledWith('virtualRowsWithCache');
+    });
+
+    describe('Reload rows', () => {
+      beforeEach(() => {
+        jest.useFakeTimers();
+        virtualRowsWithCache.mockImplementation(() => ({
+          skip: 100,
+          rows: Array.from({ length: 200 }),
+        }));
+      });
+
+      it('should reload rows when sorting changed', () => {
+        const getRows = jest.fn();
+        const tree = mount((
+          <PluginHost>
+            {pluginDepsToComponents(defaultDeps)}
+            <VirtualTableState
+              {...defaultProps}
+              getRows={getRows}
+            />
+          </PluginHost>
+        ));
+
+        executeComputedAction(tree, actions => actions.changeColumnSorting({}));
+        jest.runAllTimers();
+
+        expect(getRows).toHaveBeenCalledTimes(2);
+        expect(getRows)
+          .toHaveBeenCalledWith(100, 200); // reload visible range
+      });
+
+      it('should reload rows when filters changed', () => {
+        const getRows = jest.fn();
+        const tree = mount((
+          <PluginHost>
+            {pluginDepsToComponents(defaultDeps)}
+            <VirtualTableState
+              {...defaultProps}
+              getRows={getRows}
+            />
+          </PluginHost>
+        ));
+
+        executeComputedAction(tree, actions => actions.changeColumnFilter({}));
+        jest.runAllTimers();
+
+        expect(getRows).toHaveBeenCalledTimes(2);
+        expect(getRows)
+          .toHaveBeenCalledWith(100, 200); // reload visible range
+      });
+    });
+  });
+});
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx
new file mode 100644
index 0000000000..6feb0a0143
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { Getter, Action, Plugin, Getters, Actions } from '@devexpress/dx-react-core';
+import {
+  recalculateBounds, calculateRequestedRange, virtualRowsWithCache,
+  trimRowsToInterval, intervalUtil, emptyVirtualRows, plainRows, loadedRowsStart,
+  VirtualRows, Interval,
+} from '@devexpress/dx-grid-core';
+import { VirtualTableStateProps, VirtualTableStateState } from '../../types';
+
+const virtualRowsComputed = (
+  { skip, rows, virtualRowsCache }: Getters,
+) => virtualRowsWithCache(skip, rows, virtualRowsCache);
+
+const rowsComputed = ({ virtualRows }: Getters) => plainRows(virtualRows);
+
+const loadedRowsStartComputed = ({ virtualRows }: Getters) => loadedRowsStart(virtualRows);
+
+// tslint:disable-next-line: max-line-length
+class VirtualTableStateBase extends React.PureComponent<VirtualTableStateProps, VirtualTableStateState> {
+  static defaultProps = {
+    pageSize: 100,
+  };
+  requestTimer: number = 0;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      virtualRowsCache: emptyVirtualRows,
+      requestedPageIndex: undefined,
+      availableRowCount: props.totalRowCount || 0,
+    };
+  }
+
+  requestNextPageAction = (
+    { referenceIndex, forceReload },
+    { virtualRows, skip }: Getters,
+  ) => {
+    const { pageSize, totalRowCount } = this.props;
+
+    let newBounds;
+    let requestedRange;
+    let actualVirtualRows = virtualRows;
+    if (forceReload) {
+      newBounds = requestedRange = { start: skip, end: skip + pageSize! * 2 };
+      actualVirtualRows = emptyVirtualRows;
+    } else {
+      const loadedInterval = intervalUtil.getRowsInterval(virtualRows);
+      newBounds = recalculateBounds(referenceIndex, pageSize!, totalRowCount);
+      requestedRange = calculateRequestedRange(
+        loadedInterval, newBounds, referenceIndex, pageSize!,
+      );
+    }
+
+    const { requestedPageIndex } = this.state;
+    const newPageIndex = requestedRange.start;
+    const loadCount = (requestedRange.end - requestedRange.start);
+    const shouldLoadRows = (newPageIndex !== requestedPageIndex && loadCount > 0) || forceReload;
+
+    if (shouldLoadRows) {
+      this.requestNextPage(newPageIndex, loadCount, actualVirtualRows, newBounds);
+    }
+  }
+
+  requestNextPage(
+    newPageIndex: number, loadCount: number, virtualRows: VirtualRows, newBounds: Interval,
+  ) {
+    const { getRows, infiniteScrolling, totalRowCount } = this.props;
+    const { availableRowCount: stateAvailableCount } = this.state;
+
+    if (this.requestTimer !== 0) {
+      clearTimeout(this.requestTimer);
+    }
+    this.requestTimer = window.setTimeout(() => {
+      getRows(newPageIndex, loadCount);
+
+      const virtualRowsCache = trimRowsToInterval(virtualRows, newBounds);
+      const newRowCount = infiniteScrolling
+        ? Math.max(newBounds.end + loadCount, stateAvailableCount)
+        : totalRowCount;
+
+      this.setState({
+        virtualRowsCache,
+        availableRowCount: newRowCount,
+        requestedPageIndex: newPageIndex,
+      });
+    }, 50);
+  }
+
+  clearRowsCacheAction = (
+    _: any,
+    __: Getters,
+    { requestNextPage }: Actions,
+  ) => {
+    this.setState({
+      virtualRowsCache: emptyVirtualRows,
+    });
+    requestNextPage({ forceReload: true });
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      availableRowCount = prevState.availableRowCount,
+    } = nextProps;
+
+    return {
+      availableRowCount,
+    };
+  }
+
+  componentDidMount() {
+    const { getRows, pageSize, infiniteScrolling, totalRowCount } = this.props;
+    getRows(0, 2 * pageSize!);
+
+    const newRowCount = infiniteScrolling ? 2 * pageSize! : totalRowCount;
+    this.setState({
+      availableRowCount: newRowCount,
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.requestTimer !== 0) {
+      window.clearTimeout(this.requestTimer);
+    }
+  }
+
+  render() {
+    const { virtualRowsCache, availableRowCount: stateRowCount } = this.state;
+    const { skip, pageSize, loading, infiniteScrolling, totalRowCount } = this.props;
+
+    const availableRowCount = infiniteScrolling ? stateRowCount : totalRowCount;
+
+    return (
+      <Plugin
+        name="VirtualTableState"
+      >
+        <Getter name="isDataRemote" value />
+        <Getter name="isDataLoading" value={loading} />
+        <Getter name="isScrollingInfinite" value={infiniteScrolling} />
+        <Getter name="skip" value={skip} />
+        <Getter name="virtualRowsCache" value={virtualRowsCache} />
+        <Getter name="pageSize" value={pageSize} />
+        <Getter name="availableRowCount" value={availableRowCount} />
+
+        <Getter name="virtualRows" computed={virtualRowsComputed} />
+        <Getter name="rows" computed={rowsComputed} />
+        <Getter name="loadedRowsStart" computed={loadedRowsStartComputed} />
+
+        <Action name="requestNextPage" action={this.requestNextPageAction} />
+        <Action name="clearRowCache" action={this.clearRowsCacheAction} />
+        <Action name="changeColumnSorting" action={this.clearRowsCacheAction} />
+        <Action name="changeColumnFilter" action={this.clearRowsCacheAction} />
+      </Plugin>
+    );
+  }
+}
+
+export const VirtualTableState: React.ComponentType<VirtualTableStateProps> = VirtualTableStateBase;
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.test.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.test.tsx
new file mode 100644
index 0000000000..f9782fbdb6
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.test.tsx
@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { PluginHost, Template } from '@devexpress/dx-react-core';
+import {
+  isStubTableCell,
+  tableRowsWithDataRows,
+  visibleRowsBounds,
+} from '@devexpress/dx-grid-core';
+import { makeVirtualTable } from './virtual-table';
+import { Table } from '../table';
+import { pluginDepsToComponents } from '@devexpress/dx-testing';
+import { RemoteDataLoader } from './remote-data-loader';
+
+jest.mock('@devexpress/dx-grid-core', () => ({
+  tableColumnsWithDataRows: jest.fn(),
+  tableRowsWithDataRows: jest.fn(),
+  getColumnWidthGetter: jest.fn(),
+  visibleRowsBounds: jest.fn(),
+  getRowsRenderBoundary: jest.fn(),
+  isStubTableCell: jest.fn(),
+}));
+
+describe('#makeVirtualTable', () => {
+  const VirtualLayoutMock = ({ height = 0 }) => (
+    <div style={{ height }} />
+  );
+  const Container = props => <div {...props} />;
+  const TableMock = ({ layoutComponent: LayoutComponent }) => (
+    <Template name="tableLayout">
+      {params => <LayoutComponent {...params} />}
+    </Template>
+  );
+  TableMock.components = {} as any;
+  const defaultVirtualTableProps = {
+    VirtualLayout: VirtualLayoutMock,
+    FixedHeader: () => null,
+    FixedFooter: () => null,
+    SkeletonCell: () => null,
+    defaultEstimatedRowHeight: 30,
+    defaultHeight: 400,
+    minColumnWidth: 100,
+  };
+  const defaultDeps = {
+    getter: {
+      loadedRowsStart: 'loadedRowsStart',
+      availableRowCount: 100,
+      getRowId: row => row.key,
+      columns: [
+        { key: 'a', column: { name: 'a' } },
+        { key: 'b', column: { name: 'b' } },
+        { key: 'c', column: { name: 'c' } },
+      ],
+      tableColumns: [
+        { key: 'a', column: { name: 'a' } },
+        { key: 'b', column: { name: 'b' } },
+        { key: 'c', column: { name: 'c' } },
+      ],
+      rows: [
+        { key: 1 },
+        { key: 2 },
+        { key: 3 },
+      ],
+      tableBodyRows: [
+        { key: 1 },
+        { key: 2 },
+        { key: 3 },
+      ],
+    },
+    action: {
+      ensureNextVirtualPage: jest.fn(),
+    },
+    template: {
+      tableLayout: {
+        containerComponent: Container,
+      },
+    },
+  };
+
+  beforeEach(() => {
+    tableRowsWithDataRows.mockImplementation(() => 'tableRowsWithDataRows');
+    visibleRowsBounds.mockImplementation(() => []);
+  });
+
+  describe('Table layout', () => {
+    const VirtualTable = makeVirtualTable(TableMock, defaultVirtualTableProps);
+    it('should pass initial props', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTable />
+        </PluginHost>
+      ));
+
+      expect(tree.find(VirtualLayoutMock).props())
+        .toMatchObject({
+          height: defaultVirtualTableProps.defaultHeight,
+          estimatedRowHeight: defaultVirtualTableProps.defaultEstimatedRowHeight,
+          headTableComponent: defaultVirtualTableProps.FixedHeader,
+          footerTableComponent: defaultVirtualTableProps.FixedFooter,
+          totalRowCount: defaultDeps.getter.availableRowCount,
+          loadedRowsStart: defaultDeps.getter.loadedRowsStart,
+        });
+    });
+
+    it('should pass the ensureNextVirtualPage action', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTable />
+        </PluginHost>
+      ));
+      const ensureNextVirtualPage = tree.find(VirtualLayoutMock)
+        .prop('ensureNextVirtualPage') as () => void;
+
+      ensureNextVirtualPage();
+
+      expect(defaultDeps.action.ensureNextVirtualPage)
+        .toHaveBeenCalled();
+    });
+
+    it('should update connected props', () => {
+      const WrappedVirtualTable = ({ height }) => (
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <VirtualTable height={height} />
+        </PluginHost>
+      );
+      const tree = mount((
+        <WrappedVirtualTable height={200} />
+      ));
+      expect(tree.find(VirtualLayoutMock).prop('height'))
+        .toBe(200);
+
+      tree.setProps({ height: 300 });
+      tree.update();
+
+      expect(tree.find(VirtualLayoutMock).prop('height'))
+        .toBe(300);
+    });
+  });
+
+  describe('inner plugins', () => {
+    describe('Table', () => {
+      it('should pass layoutComponent to the Table', () => {
+        const defaultProps = {
+          footerTableComponent: () => null,
+          headTableComponent: () => null,
+        };
+        const VirtualTable = makeVirtualTable(Table, defaultVirtualTableProps);
+        const tree = mount((
+          <PluginHost>
+            {pluginDepsToComponents(defaultDeps)}
+            <VirtualTable
+              {...defaultProps}
+            />
+          </PluginHost>
+        ));
+
+        expect(tree.find(VirtualLayoutMock).props())
+          .toMatchObject(defaultProps);
+      });
+
+      it('should pass rest props to a Table', () => {
+        const columnExtensions = [{ name: 'a', width: 0 }];
+        const VirtualTable = makeVirtualTable(TableMock, defaultVirtualTableProps);
+        const tree = mount((
+          <PluginHost>
+            <VirtualTable columnExtensions={columnExtensions} />
+          </PluginHost>
+        ));
+
+        expect(tree.find(TableMock).prop('columnExtensions'))
+          .toEqual(columnExtensions);
+      });
+    });
+
+    it('should add RemoteDataLoadedPlugin', () => {
+      const VirtualTable = makeVirtualTable(TableMock, defaultVirtualTableProps);
+      const tree = mount((
+        <PluginHost>
+          <VirtualTable />
+        </PluginHost>
+      ));
+
+      expect(tree.find(RemoteDataLoader))
+        .toBeTruthy();
+    });
+
+  });
+
+  it('should render skeleton stub cell using skeletonCellComponent', () => {
+    isStubTableCell.mockImplementation(() => true);
+    const VirtualTable = makeVirtualTable(TableMock, defaultVirtualTableProps);
+    const deps = {
+      template: {
+        tableCell: {
+          tableRow: { type: 'undefined', rowId: 1, row: 'row' },
+          tableColumn: { type: 'undefined', column: 'column' },
+          style: {},
+        },
+        tableRow: {
+          tableRow: { type: 'undefined', rowId: 1, row: 'row' },
+          style: {},
+        },
+      },
+    };
+
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents(defaultDeps, deps)}
+        <VirtualTable />
+      </PluginHost>
+    ));
+
+    expect(isStubTableCell)
+      .toBeCalledWith(deps.template.tableCell.tableRow);
+    expect(tree.find(defaultVirtualTableProps.SkeletonCell).props())
+      .toMatchObject(deps.template.tableCell);
+  });
+
+  it('should expose Table components', () => {
+    TableMock.components = {
+      someComponent: 'SomeComponent',
+    };
+    TableMock.SomeComponent = () => null;
+    const VirtualTable = makeVirtualTable(TableMock, defaultVirtualTableProps);
+
+    expect(VirtualTable.SomeComponent).toBe(TableMock.SomeComponent);
+  });
+});
diff --git a/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.tsx b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.tsx
new file mode 100644
index 0000000000..b6fb1ecaac
--- /dev/null
+++ b/packages/dx-react-grid/src/plugins/virtual-table/virtual-table.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import {
+  connectProps, Plugin, Template,
+  PluginComponents,
+  TemplateConnector,
+  TemplatePlaceholder,
+} from '@devexpress/dx-react-core';
+import {
+  isStubTableCell,
+} from '@devexpress/dx-grid-core';
+import {
+  VirtualTableProps, VirtualTableLayoutProps, VirtualTableLayoutState,
+  Table as TableNS,
+  TableLayoutProps,
+} from '../../types';
+import { RemoteDataLoader } from './remote-data-loader';
+
+/** @internal */
+export const makeVirtualTable: (...args: any) => any = (Table, {
+  VirtualLayout,
+  FixedHeader,
+  FixedFooter,
+  SkeletonCell,
+  defaultEstimatedRowHeight,
+  defaultHeight,
+}) => {
+  class VirtualTable extends React.PureComponent<VirtualTableProps, VirtualTableLayoutState> {
+    static defaultProps = {
+      estimatedRowHeight: defaultEstimatedRowHeight,
+      height: defaultHeight,
+      headTableComponent: FixedHeader,
+      footerTableComponent: FixedFooter,
+      skeletonCellComponent: SkeletonCell,
+    };
+    static FixedHeader: React.ComponentType;
+    static FixedFooter: React.ComponentType;
+    static SkeletonCell: React.ComponentType;
+
+    layoutRenderComponent: React.ComponentType<VirtualTableLayoutProps> & { update(): void; };
+
+    constructor(props) {
+      super(props);
+
+      this.layoutRenderComponent = connectProps(VirtualLayout, () => {
+        const {
+          headTableComponent,
+          footerTableComponent,
+        } = this.props;
+
+        return {
+          headTableComponent,
+          footerTableComponent,
+        };
+      });
+    }
+
+    componentDidUpdate() {
+      this.layoutRenderComponent.update();
+    }
+
+    render() {
+      const {
+        height,
+        estimatedRowHeight,
+        skeletonCellComponent: SkeletonStubCell,
+        children,
+        ...restProps
+      } = this.props;
+
+      return (
+        <Plugin name="VirtualTable">
+          <Table layoutComponent={this.layoutRenderComponent} {...restProps} />
+          <RemoteDataLoader />
+
+          <Template name="tableLayout">
+            {(params: TableLayoutProps) => {
+              return (
+                <TemplateConnector>
+                  {(
+                    { availableRowCount, loadedRowsStart, tableBodyRows },
+                    { ensureNextVirtualPage },
+                  ) => {
+
+                    const totalRowCount = availableRowCount || tableBodyRows.length;
+
+                    return (
+                      <TemplatePlaceholder
+                        params={{
+                          ...params,
+                          totalRowCount,
+                          loadedRowsStart,
+                          height,
+                          estimatedRowHeight,
+                          ensureNextVirtualPage,
+                        }}
+                      />
+                    );
+                  }}
+                </TemplateConnector>
+              );
+            }}
+          </Template>
+
+          <Template
+            name="tableCell"
+            predicate={({ tableRow }: any) => !!isStubTableCell(tableRow)}
+          >
+            {(params: TableNS.CellProps) => (
+              <SkeletonStubCell {...params} />
+            )}
+          </Template>
+        </Plugin>
+      );
+    }
+  }
+
+  Object.values(Table.components as PluginComponents).forEach((name) => {
+    VirtualTable[name] = Table[name];
+  });
+
+  VirtualTable.FixedHeader = FixedHeader;
+  VirtualTable.FixedFooter = FixedFooter;
+  VirtualTable.SkeletonCell = SkeletonCell;
+
+  return VirtualTable;
+};
diff --git a/packages/dx-react-grid/src/types/layout/table-layout.types.ts b/packages/dx-react-grid/src/types/layout/table-layout.types.ts
index b41dcfda49..4573ac3164 100644
--- a/packages/dx-react-grid/src/types/layout/table-layout.types.ts
+++ b/packages/dx-react-grid/src/types/layout/table-layout.types.ts
@@ -41,15 +41,33 @@ export interface VirtualTableLayoutProps extends TableLayoutProps {
   estimatedRowHeight: number;
   headTableComponent: React.ComponentType<object>;
   footerTableComponent: React.ComponentType<object>;
+  totalRowCount: number;
+  loadedRowsStart: number;
+  ensureNextVirtualPage: (payload?: any) => void;
 }
 /** @internal */
 export type VirtualTableLayoutState = {
   rowHeights: Map<any, number>,
   viewportTop: number,
   viewportLeft: number,
-  width: number,
   height: number,
   headerHeight: number,
   bodyHeight: number,
   footerHeight: number,
+  containerWidth: number,
+  containerHeight: number,
+};
+
+type virtualBlockProps = placeholderComponents | 'tableRef' | 'minWidth' | 'bodyComponent';
+/** @internal */
+export type VirtualTableLayoutBlockProps = Pick<VirtualTableLayoutProps, virtualBlockProps> & {
+  name: string,
+  collapsedGrid: {
+    columns: any,
+    rows: any,
+  },
+  blockRefsHandler: (name: string, ref: React.ReactInstance | null) => void,
+  rowRefsHandler: (row: any, ref?: React.ReactInstance | null) => void,
+  marginBottom?: number,
+  tableComponent: React.ComponentType<any>,
 };
diff --git a/packages/dx-react-grid/src/types/tables/index.ts b/packages/dx-react-grid/src/types/tables/index.ts
index 76d820543c..7a4ec948d8 100644
--- a/packages/dx-react-grid/src/types/tables/index.ts
+++ b/packages/dx-react-grid/src/types/tables/index.ts
@@ -1,2 +1,3 @@
 export * from './table.types';
 export * from './virtual-table.types';
+export * from './virtual-table-state.types';
diff --git a/packages/dx-react-grid/src/types/tables/virtual-table-state.types.ts b/packages/dx-react-grid/src/types/tables/virtual-table-state.types.ts
new file mode 100644
index 0000000000..f1a48de756
--- /dev/null
+++ b/packages/dx-react-grid/src/types/tables/virtual-table-state.types.ts
@@ -0,0 +1,15 @@
+export interface VirtualTableStateProps {
+  infiniteScrolling: boolean;
+  skip: number;
+  totalRowCount: number;
+  pageSize?: number;
+  loading: boolean;
+  getRows: (skip: number, take: number) => void;
+}
+
+/** @internal */
+export type VirtualTableStateState = {
+  virtualRowsCache: any,
+  requestedPageIndex?: number,
+  availableRowCount: number,
+};
diff --git a/packages/dx-react-grid/src/types/tables/virtual-table.types.ts b/packages/dx-react-grid/src/types/tables/virtual-table.types.ts
index eb9aa36a16..b07f4d2a69 100644
--- a/packages/dx-react-grid/src/types/tables/virtual-table.types.ts
+++ b/packages/dx-react-grid/src/types/tables/virtual-table.types.ts
@@ -40,6 +40,9 @@ export interface VirtualTableProps {
   headTableComponent: React.ComponentType<object>;
   /** @internal */
   footerTableComponent: React.ComponentType<object>;
+  // TODO
+  skeletonCellComponent: React.ComponentType<Table.CellProps>;
+  // onViewportTopChange: (number) => void;
 }
 
 // tslint:disable-next-line:max-line-length
diff --git a/packages/dx-react-grid/src/utils/remote-rows-cache.test.ts b/packages/dx-react-grid/src/utils/remote-rows-cache.test.ts
new file mode 100644
index 0000000000..1249fde5ad
--- /dev/null
+++ b/packages/dx-react-grid/src/utils/remote-rows-cache.test.ts
@@ -0,0 +1,103 @@
+import { createRemoteRowsCache } from './remote-rows-cache';
+
+describe('Remote rows cache', () => {
+  const createRows = length => (
+    Array.from({ length }).map((_, id) => ({ id }))
+  );
+
+  it('should store and retrieve rows', () => {
+    const rows = createRows(6);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(0, rows);
+
+    expect(cache.getRows(0, 6))
+      .toEqual(rows);
+  });
+
+  it('should store and retrive arbitary rows', () => {
+    const rows = createRows(9);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(15, rows.slice(3));
+    cache.setRows(12, rows.slice(0, 3));
+
+    expect(cache.getRows(12, 9))
+      .toEqual(rows);
+  });
+
+  it('should overwrite rows with the same start', () => {
+    const rows = createRows(6);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(15, rows.slice(0, 6));
+    cache.setRows(18, rows.slice(1, 4));
+
+    expect(cache.getRows(15, 6)).toEqual([
+      ...rows.slice(0, 3),
+      ...rows.slice(1, 4),
+    ]);
+  });
+
+  it('should not discard incomplete pages', () => {
+    const rows = createRows(8);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(3, rows);
+
+    expect(cache.getRows(3, 8))
+      .toEqual(rows);
+  });
+
+  it('should return consistent rows', () => {
+    const rows = createRows(12);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(0, rows.slice(0, 5));
+    cache.setRows(6, rows.slice(6, 12));
+
+    expect(cache.getRows(0, 12))
+      .toEqual(rows.slice(0, 3));
+  });
+
+  it('should invalidate all pages', () => {
+    const rows = createRows(9);
+    const cache = createRemoteRowsCache(3);
+
+    cache.setRows(0, rows);
+    cache.setRows(9, rows);
+    cache.invalidate();
+
+    expect(cache.getRows(0, 3)).toEqual([]);
+    expect(cache.getRows(9, 3)).toEqual([]);
+  });
+
+  describe('pages replacement', () => {
+    it('should discard least reacently used page ', () => {
+      const rows = createRows(20);
+      const cache = createRemoteRowsCache(4, 16);
+
+      cache.setRows(0, rows);
+
+      expect(cache.getRows(0, 4))
+        .toEqual([]);
+      expect(cache.getRows(4, 16))
+        .toEqual(rows.slice(4, 20));
+    });
+
+    it('should update page recently used info on retirieve', () => {
+      const rows = createRows(16);
+      const cache = createRemoteRowsCache(4, 12);
+
+      cache.setRows(0, rows);
+      cache.getRows(8, 4);
+      cache.getRows(4, 4);
+      cache.setRows(0, rows.slice(0, 4));
+
+      expect(cache.getRows(0, 12))
+        .toEqual(rows.slice(0, 12));
+      expect(cache.getRows(12, 4))
+        .toEqual([]);
+    });
+  });
+});
diff --git a/packages/dx-react-grid/src/utils/remote-rows-cache.ts b/packages/dx-react-grid/src/utils/remote-rows-cache.ts
new file mode 100644
index 0000000000..93e96dd92b
--- /dev/null
+++ b/packages/dx-react-grid/src/utils/remote-rows-cache.ts
@@ -0,0 +1,111 @@
+class Node {
+  start: number;
+  rows: ReadonlyArray<any>;
+  prev: Node | null = null;
+  next: Node | null = null;
+
+  constructor(start: number, rows: ReadonlyArray<any>) {
+    this.start = start;
+    this.rows = rows;
+  }
+}
+
+// tslint:disable-next-line:max-classes-per-file
+class LRUCache {
+  pageSize: number;
+  capacity: number;
+  head!: Node;
+  tail!: Node;
+  pages = new Map<number, Node>();
+
+  constructor(pageSize: number, capacity = Number.POSITIVE_INFINITY) {
+    this.pageSize = pageSize;
+    this.capacity = capacity;
+    this.initList();
+  }
+
+  initList() {
+    this.head = new Node(-1, []);
+    this.tail = new Node(-1, []);
+    this.head.next = this.tail;
+    this.tail.prev = this.head;
+  }
+
+  addPage(pageStart: number, rows: ReadonlyArray<any>) {
+    if (this.pages.has(pageStart)) {
+      this.removePage(pageStart);
+    }
+
+    const node = new Node(pageStart, rows);
+    const last = this.tail.prev!;
+    last.next = node;
+    node.next = this.tail;
+    node.prev = last;
+    this.tail.prev = node;
+    this.pages.set(pageStart, node);
+
+    if (this.pages.size > this.capacity) {
+      this.removePage(this.head.next!.start);
+    }
+  }
+
+  removePage(start: number) {
+    const node = this.pages.get(start)!;
+    node.prev!.next = node.next;
+    node.next!.prev = node.prev;
+
+    this.pages.delete(start);
+  }
+
+  getPage(pageStart: number) {
+    if (!this.pages.has(pageStart)) {
+      return null;
+    }
+
+    const { rows } = this.pages.get(pageStart)!;
+    this.removePage(pageStart);
+    this.addPage(pageStart, rows);
+
+    return rows;
+  }
+
+  clear() {
+    this.pages.clear();
+    this.initList();
+  }
+}
+
+export const createRemoteRowsCache = (pageSize: number, capacity = Number.POSITIVE_INFINITY) => {
+  const cache = new LRUCache(pageSize, capacity / pageSize);
+
+  return {
+    getRows: (skip: number, count: number) => {
+      let result: any[] = [];
+      const pageCount = Math.ceil(count / pageSize);
+      for (let i = 0; i < pageCount; i += 1) {
+        const pageStart = skip + i * pageSize;
+        const chunk = cache.getPage(pageStart);
+
+        // add incomplete page to result only if it is last one
+        if (chunk === null || (i !== pageCount - 1 && chunk.length !== pageSize)) {
+          return result;
+        }
+        result = result.concat(chunk);
+      }
+      return result;
+    },
+    setRows: (skip: number, rows: ReadonlyArray<any>) => {
+      const pageCount = Math.ceil(rows.length / pageSize);
+      for (let i = 0; i < pageCount; i += 1) {
+        const pageStart = i * pageSize;
+        const rowsChunk = rows.slice(pageStart, pageStart + pageSize);
+
+        // put incomplete page only if it is last one
+        if (rowsChunk.length === pageSize || i === pageCount - 1) {
+          cache.addPage(pageStart + skip, rowsChunk);
+        }
+      }
+    },
+    invalidate: () => cache.clear(),
+  };
+};
diff --git a/packages/dx-react-grid/src/utils/virtual-table.test.tsx b/packages/dx-react-grid/src/utils/virtual-table.test.tsx
deleted file mode 100644
index 556cf88f1f..0000000000
--- a/packages/dx-react-grid/src/utils/virtual-table.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from 'react';
-import { mount } from 'enzyme';
-import { makeVirtualTable } from './virtual-table';
-
-describe('#makeVirtualTable', () => {
-  const TableMock = ({ layoutComponent: LayoutComponent }) => (
-    <LayoutComponent />
-  );
-  TableMock.components = [];
-  const VirtualTableMock = ({ height }) => (
-    <div height={height} />
-  );
-
-  it('should update layout height from props', () => {
-    const VirtualTable = makeVirtualTable(TableMock, {
-      VirtualLayout: VirtualTableMock,
-    });
-    const tree = mount((
-      <VirtualTable height={200} />
-    ));
-    expect(tree.find(VirtualTableMock).prop('height'))
-      .toBe(200);
-
-    tree.setProps({ height: 300 });
-    tree.update();
-
-    expect(tree.find(VirtualTableMock).prop('height'))
-      .toBe(300);
-  });
-});
diff --git a/packages/dx-react-grid/src/utils/virtual-table.tsx b/packages/dx-react-grid/src/utils/virtual-table.tsx
deleted file mode 100644
index bed8dfc6ce..0000000000
--- a/packages/dx-react-grid/src/utils/virtual-table.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { connectProps, PluginComponents } from '@devexpress/dx-react-core';
-import { VirtualTableProps, VirtualTableLayoutProps } from '../types';
-
-/** @internal */
-export const makeVirtualTable: (...args: any) => any = (Table, {
-  VirtualLayout,
-  FixedHeader,
-  FixedFooter,
-  defaultEstimatedRowHeight,
-  defaultHeight,
-}) => {
-  class VirtualTable extends React.PureComponent<VirtualTableProps> {
-    static defaultProps = {
-      estimatedRowHeight: defaultEstimatedRowHeight,
-      height: defaultHeight,
-      headTableComponent: FixedHeader,
-      footerTableComponent: FixedFooter,
-    };
-    static FixedHeader: React.ComponentType;
-    static FixedFooter: React.ComponentType;
-    layoutRenderComponent: React.ComponentType<VirtualTableLayoutProps> & { update(): void; };
-
-    constructor(props) {
-      super(props);
-
-      this.layoutRenderComponent = connectProps(VirtualLayout, () => {
-        const {
-          height,
-          estimatedRowHeight,
-          headTableComponent,
-          footerTableComponent,
-        } = this.props;
-
-        return {
-          height,
-          estimatedRowHeight,
-          headTableComponent,
-          footerTableComponent,
-        };
-      });
-    }
-
-    componentDidUpdate() {
-      this.layoutRenderComponent.update();
-    }
-
-    render() {
-      const {
-        height,
-        estimatedRowHeight,
-        headTableComponent,
-        ...restProps
-      } = this.props;
-
-      return (
-        <Table layoutComponent={this.layoutRenderComponent} {...restProps} />
-      );
-    }
-  }
-
-  Object.values(Table.components as PluginComponents).forEach((name) => {
-    VirtualTable[name] = Table[name];
-  });
-
-  VirtualTable.FixedHeader = FixedHeader;
-  VirtualTable.FixedFooter = FixedFooter;
-
-  return VirtualTable;
-};
diff --git a/packages/dx-styles/dx-grid-bs4.scss b/packages/dx-styles/dx-grid-bs4.scss
index 1cdd88f30f..18fec031ec 100644
--- a/packages/dx-styles/dx-grid-bs4.scss
+++ b/packages/dx-styles/dx-grid-bs4.scss
@@ -232,3 +232,9 @@ button.dx-g-bs4-table-edit-command-cell {
     transform: translateX(-50%);
   }
 }
+.dx-g-bs4-skeleton-cell {
+  padding: 7px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACqCAYAAABbAOqQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYWQ2ODE5MS00ZDMxLWRjNGYtOTU0NC1jNjJkMTIxMjY2M2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1RUVFQzAzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1RUVFQkYzRDYzMTFFODlFNThCOUJBQjU4Q0EzRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlMjM1Y2U0LTc5ZWUtNGI0NC05ZjlkLTk2NTZmZGFjNjhhNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk1OTQ2MjBiLTUyMTQtYTM0Yy04Nzc5LTEwMmEyMTY4MTlhOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvLbJKYAAADrSURBVHja7N3BDYBACABBsQn7L48q0BoMD5SZxAZuc74gF1V1MMfpCARBEEEQRBAEEQRBdovnuxxDq3RD/LIQRBAEQRBBEEQQBBEEQQQBAAAAAAAAABhi8gZVbgxi6kQQBBEEQQRBEEEQRBAEQRBBAAAAAAAAAAAabX2Daux2lqkTQRBEEAQRBEEEQRBBEARBBAEAAAAAAAAAaLR1g2osUyeCIIggCCIIggiCIIIgCIIIAgAAAAAAAADQ6KsbVPnXIKZOBEEQQRBEEAQRBEEEQRAEEYRXoqqcghuCIIIgiCAIIgiCCMIUtwADALYCCr92l++TAAAAAElFTkSuQmCC);
+  background-repeat: no-repeat repeat;
+  background-origin: content-box;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8599cae95c..eab39125f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,7 @@
     "noLib": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "downlevelIteration": true,
     "sourceMap": true,
     "lib": ["es6", "es7", "es2017.object", "dom"],
     "baseUrl": "./",