From eeb69883a2bc972e4a7a8a1d3835bc58554b3113 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Tue, 31 Jan 2023 14:53:14 -0800
Subject: [PATCH 01/13] use new sampler features

---
 .../dimension-spec/dimension-spec.spec.ts     |   85 -
 .../dimension-spec/dimension-spec.ts          |   14 +-
 .../ingestion-spec/ingestion-spec.spec.ts     |  300 +-
 .../ingestion-spec/ingestion-spec.tsx         |   43 +-
 .../metric-spec/metric-spec.spec.ts           |    6 +-
 .../druid-models/metric-spec/metric-spec.tsx  |   11 +-
 web-console/src/helpers/spec-conversion.ts    |    6 +-
 web-console/src/utils/sampler.mock.ts         |  135 +-
 web-console/src/utils/sampler.spec.ts         |  133 +
 web-console/src/utils/sampler.ts              |  129 +-
 web-console/src/utils/utils.spec.ts           |   16 +-
 .../__snapshots__/filter-table.spec.tsx.snap  | 3753 ++++++++++++++--
 .../filter-table/filter-table.spec.tsx        |   14 +-
 .../filter-table/filter-table.tsx             |   18 +-
 .../views/load-data-view/load-data-view.tsx   |  120 +-
 .../parse-data-table.spec.tsx.snap            | 3155 ++++++++++++--
 .../parse-data-table.spec.tsx                 |   14 +-
 .../parse-data-table/parse-data-table.tsx     |   80 +-
 .../parse-time-table.spec.tsx.snap            | 3764 ++++++++++++++--
 .../parse-time-table.spec.tsx                 |   13 +-
 .../parse-time-table/parse-time-table.tsx     |  129 +-
 .../__snapshots__/schema-table.spec.tsx.snap  | 3769 +++++++++++++++--
 .../schema-table/schema-table.spec.tsx        |   15 +-
 .../schema-table/schema-table.tsx             |   18 +-
 .../transform-table.spec.tsx.snap             | 3753 ++++++++++++++--
 .../transform-table/transform-table.spec.tsx  |   14 +-
 .../transform-table/transform-table.tsx       |   22 +-
 .../input-format-step/input-format-step.tsx   |   67 +-
 28 files changed, 16875 insertions(+), 2721 deletions(-)
 delete mode 100644 web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
 create mode 100644 web-console/src/utils/sampler.spec.ts

diff --git a/web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts b/web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
deleted file mode 100644
index 8d68d41df0c0..000000000000
--- a/web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CSV_SAMPLE, JSON_SAMPLE } from '../../utils/sampler.mock';
-
-import { getDimensionSpecs } from './dimension-spec';
-
-describe('dimension-spec', () => {
-  describe('getDimensionSpecs', () => {
-    it('works for empty', () => {
-      expect(getDimensionSpecs({ header: ['header'], rows: [] }, {}, false, true)).toEqual([
-        'header',
-      ]);
-    });
-
-    it('works with json', () => {
-      expect(getDimensionSpecs(JSON_SAMPLE, {}, false, false)).toEqual([
-        'timestamp',
-        'user',
-        {
-          name: 'followers',
-          type: 'long',
-        },
-        {
-          name: 'spend',
-          type: 'double',
-        },
-        'id',
-        'tags',
-        'nums',
-      ]);
-
-      expect(getDimensionSpecs(JSON_SAMPLE, {}, false, true)).toEqual([
-        'timestamp',
-        'user',
-        'id',
-        'tags',
-        'nums',
-      ]);
-    });
-
-    it('works with csv', () => {
-      expect(getDimensionSpecs(CSV_SAMPLE, {}, true, false)).toEqual([
-        'timestamp',
-        'user',
-        {
-          name: 'followers',
-          type: 'long',
-        },
-        {
-          name: 'spend',
-          type: 'double',
-        },
-        {
-          name: 'id',
-          type: 'long',
-        },
-        'tags',
-        'nums',
-      ]);
-
-      expect(getDimensionSpecs(CSV_SAMPLE, {}, true, true)).toEqual([
-        'timestamp',
-        'user',
-        'tags',
-        'nums',
-      ]);
-    });
-  });
-});
diff --git a/web-console/src/druid-models/dimension-spec/dimension-spec.ts b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
index d679dc91d3ea..9cb40c8e0c66 100644
--- a/web-console/src/druid-models/dimension-spec/dimension-spec.ts
+++ b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
@@ -18,13 +18,16 @@
 
 import type { Field } from '../../components';
 import { filterMap, typeIs } from '../../utils';
-import type { SampleHeaderAndRows } from '../../utils/sampler';
-import { guessColumnTypeFromHeaderAndRows } from '../ingestion-spec/ingestion-spec';
+import type { SampleResponse } from '../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../utils/sampler';
+import { guessColumnTypeFromSampleResponse } from '../ingestion-spec/ingestion-spec';
 
 export interface DimensionsSpec {
   readonly dimensions?: (string | DimensionSpec)[];
   readonly dimensionExclusions?: string[];
   readonly spatialDimensions?: any[];
+  readonly includeAllDimensions?: boolean;
+  readonly useSchemaDiscovery?: boolean;
 }
 
 export interface DimensionSpec {
@@ -77,16 +80,15 @@ export function inflateDimensionSpec(dimensionSpec: string | DimensionSpec): Dim
 }
 
 export function getDimensionSpecs(
-  headerAndRows: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   typeHints: Record<string, string>,
   guessNumericStringsAsNumbers: boolean,
   hasRollup: boolean,
 ): (string | DimensionSpec)[] {
-  return filterMap(headerAndRows.header, h => {
-    if (h === '__time') return;
+  return filterMap(getHeaderNamesFromSampleResponse(sampleResponse, true), h => {
     const type =
       typeHints[h] ||
-      guessColumnTypeFromHeaderAndRows(headerAndRows, h, guessNumericStringsAsNumbers);
+      guessColumnTypeFromSampleResponse(sampleResponse, h, guessNumericStringsAsNumbers);
     if (type === 'string') return h;
     if (hasRollup) return;
     return {
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
index 91bf75f35b57..69353125e083 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
@@ -18,14 +18,12 @@
 
 import { CSV_SAMPLE } from '../../utils/sampler.mock';
 
-import type { IngestionSpec } from './ingestion-spec';
 import {
   adjustId,
   cleanSpec,
-  guessColumnTypeFromHeaderAndRows,
   guessColumnTypeFromInput,
+  guessColumnTypeFromSampleResponse,
   guessInputFormat,
-  updateSchemaWithSample,
   upgradeSpec,
 } from './ingestion-spec';
 
@@ -672,36 +670,36 @@ describe('ingestion-spec', () => {
 });
 
 describe('spec utils', () => {
-  const ingestionSpec: IngestionSpec = {
-    type: 'index_parallel',
-    spec: {
-      ioConfig: {
-        type: 'index_parallel',
-        inputSource: {
-          type: 'http',
-          uris: ['https://website.com/wikipedia.json.gz'],
-        },
-        inputFormat: {
-          type: 'json',
-        },
-      },
-      tuningConfig: {
-        type: 'index_parallel',
-      },
-      dataSchema: {
-        dataSource: 'wikipedia',
-        granularitySpec: {
-          segmentGranularity: 'day',
-          queryGranularity: 'hour',
-        },
-        timestampSpec: {
-          column: 'timestamp',
-          format: 'iso',
-        },
-        dimensionsSpec: {},
-      },
-    },
-  };
+  // const ingestionSpec: IngestionSpec = {
+  //   type: 'index_parallel',
+  //   spec: {
+  //     ioConfig: {
+  //       type: 'index_parallel',
+  //       inputSource: {
+  //         type: 'http',
+  //         uris: ['https://website.com/wikipedia.json.gz'],
+  //       },
+  //       inputFormat: {
+  //         type: 'json',
+  //       },
+  //     },
+  //     tuningConfig: {
+  //       type: 'index_parallel',
+  //     },
+  //     dataSchema: {
+  //       dataSource: 'wikipedia',
+  //       granularitySpec: {
+  //         segmentGranularity: 'day',
+  //         queryGranularity: 'hour',
+  //       },
+  //       timestampSpec: {
+  //         column: 'timestamp',
+  //         format: 'iso',
+  //       },
+  //       dimensionsSpec: {},
+  //     },
+  //   },
+  // };
 
   describe('guessColumnTypeFromInput', () => {
     it('works for empty', () => {
@@ -745,131 +743,125 @@ describe('spec utils', () => {
     });
   });
 
-  describe('guessColumnTypeFromHeaderAndRows', () => {
-    it('works in empty dataset', () => {
-      expect(guessColumnTypeFromHeaderAndRows({ header: ['c0'], rows: [] }, 'c0', false)).toEqual(
-        'string',
-      );
-    });
-
+  describe('guessColumnTypeFromSampleResponse', () => {
     it('works for generic dataset', () => {
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'user', false)).toEqual('string');
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'followers', false)).toEqual('string');
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'followers', true)).toEqual('long');
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'spend', true)).toEqual('double');
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'nums', false)).toEqual('string');
-      expect(guessColumnTypeFromHeaderAndRows(CSV_SAMPLE, 'nums', true)).toEqual('string');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'user', false)).toEqual('string');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'followers', false)).toEqual('string');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'followers', true)).toEqual('long');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'spend', true)).toEqual('double');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'nums', false)).toEqual('string');
+      expect(guessColumnTypeFromSampleResponse(CSV_SAMPLE, 'nums', true)).toEqual('string');
     });
   });
 
-  it('updateSchemaWithSample', () => {
-    const withRollup = updateSchemaWithSample(
-      ingestionSpec,
-      { header: ['header'], rows: [] },
-      'specific',
-      true,
-    );
-
-    expect(withRollup).toMatchInlineSnapshot(`
-      Object {
-        "spec": Object {
-          "dataSchema": Object {
-            "dataSource": "wikipedia",
-            "dimensionsSpec": Object {
-              "dimensions": Array [
-                "header",
-              ],
-            },
-            "granularitySpec": Object {
-              "queryGranularity": "hour",
-              "rollup": true,
-              "segmentGranularity": "day",
-            },
-            "metricsSpec": Array [
-              Object {
-                "name": "count",
-                "type": "count",
-              },
-            ],
-            "timestampSpec": Object {
-              "column": "timestamp",
-              "format": "iso",
-            },
-          },
-          "ioConfig": Object {
-            "inputFormat": Object {
-              "type": "json",
-            },
-            "inputSource": Object {
-              "type": "http",
-              "uris": Array [
-                "https://website.com/wikipedia.json.gz",
-              ],
-            },
-            "type": "index_parallel",
-          },
-          "tuningConfig": Object {
-            "forceGuaranteedRollup": true,
-            "partitionsSpec": Object {
-              "type": "hashed",
-            },
-            "type": "index_parallel",
-          },
-        },
-        "type": "index_parallel",
-      }
-    `);
-
-    const noRollup = updateSchemaWithSample(
-      ingestionSpec,
-      { header: ['header'], rows: [] },
-      'specific',
-      false,
-    );
-
-    expect(noRollup).toMatchInlineSnapshot(`
-      Object {
-        "spec": Object {
-          "dataSchema": Object {
-            "dataSource": "wikipedia",
-            "dimensionsSpec": Object {
-              "dimensions": Array [
-                "header",
-              ],
-            },
-            "granularitySpec": Object {
-              "queryGranularity": "none",
-              "rollup": false,
-              "segmentGranularity": "day",
-            },
-            "timestampSpec": Object {
-              "column": "timestamp",
-              "format": "iso",
-            },
-          },
-          "ioConfig": Object {
-            "inputFormat": Object {
-              "type": "json",
-            },
-            "inputSource": Object {
-              "type": "http",
-              "uris": Array [
-                "https://website.com/wikipedia.json.gz",
-              ],
-            },
-            "type": "index_parallel",
-          },
-          "tuningConfig": Object {
-            "partitionsSpec": Object {
-              "type": "dynamic",
-            },
-            "type": "index_parallel",
-          },
-        },
-        "type": "index_parallel",
-      }
-    `);
-  });
+  // it('updateSchemaWithSample', () => {
+  //   const withRollup = updateSchemaWithSample(
+  //     ingestionSpec,
+  //     { header: ['header'], rows: [] },
+  //     'specific',
+  //     true,
+  //   );
+  //
+  //   expect(withRollup).toMatchInlineSnapshot(`
+  //     Object {
+  //       "spec": Object {
+  //         "dataSchema": Object {
+  //           "dataSource": "wikipedia",
+  //           "dimensionsSpec": Object {
+  //             "dimensions": Array [
+  //               "header",
+  //             ],
+  //           },
+  //           "granularitySpec": Object {
+  //             "queryGranularity": "hour",
+  //             "rollup": true,
+  //             "segmentGranularity": "day",
+  //           },
+  //           "metricsSpec": Array [
+  //             Object {
+  //               "name": "count",
+  //               "type": "count",
+  //             },
+  //           ],
+  //           "timestampSpec": Object {
+  //             "column": "timestamp",
+  //             "format": "iso",
+  //           },
+  //         },
+  //         "ioConfig": Object {
+  //           "inputFormat": Object {
+  //             "type": "json",
+  //           },
+  //           "inputSource": Object {
+  //             "type": "http",
+  //             "uris": Array [
+  //               "https://website.com/wikipedia.json.gz",
+  //             ],
+  //           },
+  //           "type": "index_parallel",
+  //         },
+  //         "tuningConfig": Object {
+  //           "forceGuaranteedRollup": true,
+  //           "partitionsSpec": Object {
+  //             "type": "hashed",
+  //           },
+  //           "type": "index_parallel",
+  //         },
+  //       },
+  //       "type": "index_parallel",
+  //     }
+  //   `);
+  //
+  //   const noRollup = updateSchemaWithSample(
+  //     ingestionSpec,
+  //     { header: ['header'], rows: [] },
+  //     'specific',
+  //     false,
+  //   );
+  //
+  //   expect(noRollup).toMatchInlineSnapshot(`
+  //     Object {
+  //       "spec": Object {
+  //         "dataSchema": Object {
+  //           "dataSource": "wikipedia",
+  //           "dimensionsSpec": Object {
+  //             "dimensions": Array [
+  //               "header",
+  //             ],
+  //           },
+  //           "granularitySpec": Object {
+  //             "queryGranularity": "none",
+  //             "rollup": false,
+  //             "segmentGranularity": "day",
+  //           },
+  //           "timestampSpec": Object {
+  //             "column": "timestamp",
+  //             "format": "iso",
+  //           },
+  //         },
+  //         "ioConfig": Object {
+  //           "inputFormat": Object {
+  //             "type": "json",
+  //           },
+  //           "inputSource": Object {
+  //             "type": "http",
+  //             "uris": Array [
+  //               "https://website.com/wikipedia.json.gz",
+  //             ],
+  //           },
+  //           "type": "index_parallel",
+  //         },
+  //         "tuningConfig": Object {
+  //           "partitionsSpec": Object {
+  //             "type": "dynamic",
+  //           },
+  //           "type": "index_parallel",
+  //         },
+  //       },
+  //       "type": "index_parallel",
+  //     }
+  //   `);
+  // });
 
   it('adjustId', () => {
     expect(adjustId('')).toEqual('');
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index 9f3eb072b3cd..3bcbbfb2d0b0 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -39,7 +39,7 @@ import {
   parseCsvLine,
   typeIs,
 } from '../../utils';
-import type { SampleHeaderAndRows } from '../../utils/sampler';
+import type { SampleResponse } from '../../utils/sampler';
 import type { DimensionsSpec } from '../dimension-spec/dimension-spec';
 import {
   getDimensionSpecName,
@@ -269,6 +269,9 @@ export interface DataSchema {
 export type DimensionMode = 'specific' | 'auto-detect';
 
 export function getDimensionMode(spec: Partial<IngestionSpec>): DimensionMode {
+  if (deepGet(spec, 'spec.dataSchema.dimensionsSpec.useSchemaDiscovery') === true) {
+    return 'auto-detect';
+  }
   const dimensions = deepGet(spec, 'spec.dataSchema.dimensionsSpec.dimensions') || EMPTY_ARRAY;
   return Array.isArray(dimensions) && dimensions.length === 0 ? 'auto-detect' : 'specific';
 }
@@ -2182,8 +2185,8 @@ function noNumbers(xs: string[]): boolean {
   return xs.every(x => isNaN(Number(x)));
 }
 
-export function guessInputFormat(sampleData: string[], canBeMultiLineJson = false): InputFormat {
-  let sampleDatum = sampleData[0];
+export function guessInputFormat(sampleRaw: string[], canBeMultiLineJson = false): InputFormat {
+  let sampleDatum = sampleRaw[0];
   if (sampleDatum) {
     sampleDatum = String(sampleDatum); // Really ensure it is a string
 
@@ -2319,11 +2322,11 @@ function inputFormatFromType(options: InputFormatFromTypeOptions): InputFormat {
 
 // ------------------------
 
-export function guessIsArrayFromHeaderAndRows(
-  headerAndRows: SampleHeaderAndRows,
+export function guessIsArrayFromSampleResponse(
+  sampleResponse: SampleResponse,
   column: string,
 ): boolean {
-  return headerAndRows.rows.some(r => isSimpleArray(r.input?.[column]));
+  return sampleResponse.data.some(r => isSimpleArray(r.input?.[column]));
 }
 
 export function guessColumnTypeFromInput(
@@ -2355,13 +2358,13 @@ export function guessColumnTypeFromInput(
   }
 }
 
-export function guessColumnTypeFromHeaderAndRows(
-  headerAndRows: SampleHeaderAndRows,
+export function guessColumnTypeFromSampleResponse(
+  sampleResponse: SampleResponse,
   column: string,
   guessNumericStringsAsNumbers: boolean,
 ): string {
   return guessColumnTypeFromInput(
-    filterMap(headerAndRows.rows, r => r.input?.[column]),
+    filterMap(sampleResponse.data, r => r.input?.[column]),
     guessNumericStringsAsNumbers,
   );
 }
@@ -2391,7 +2394,7 @@ function getTypeHintsFromSpec(spec: Partial<IngestionSpec>): Record<string, stri
 
 export function updateSchemaWithSample(
   spec: Partial<IngestionSpec>,
-  headerAndRows: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   dimensionMode: DimensionMode,
   rollup: boolean,
   forcePartitionInitialization = false,
@@ -2404,26 +2407,24 @@ export function updateSchemaWithSample(
   let newSpec = spec;
 
   if (dimensionMode === 'auto-detect') {
-    newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.dimensions');
+    newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.useSchemaDiscovery', true);
+    newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.includeAllDimensions', true);
     newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.dimensionExclusions', []);
   } else {
+    newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.useSchemaDiscovery');
+    newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.includeAllDimensions');
     newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.dimensionExclusions');
-
-    const dimensions = getDimensionSpecs(
-      headerAndRows,
-      typeHints,
-      guessNumericStringsAsNumbers,
-      rollup,
+    newSpec = deepSet(
+      newSpec,
+      'spec.dataSchema.dimensionsSpec.dimensions',
+      getDimensionSpecs(sampleResponse, typeHints, guessNumericStringsAsNumbers, rollup),
     );
-    if (dimensions) {
-      newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.dimensions', dimensions);
-    }
   }
 
   if (rollup) {
     newSpec = deepSet(newSpec, 'spec.dataSchema.granularitySpec.queryGranularity', 'hour');
 
-    const metrics = getMetricSpecs(headerAndRows, typeHints, guessNumericStringsAsNumbers);
+    const metrics = getMetricSpecs(sampleResponse, typeHints, guessNumericStringsAsNumbers);
     if (metrics) {
       newSpec = deepSet(newSpec, 'spec.dataSchema.metricsSpec', metrics);
     }
diff --git a/web-console/src/druid-models/metric-spec/metric-spec.spec.ts b/web-console/src/druid-models/metric-spec/metric-spec.spec.ts
index e30b806344b5..3f6d47272a29 100644
--- a/web-console/src/druid-models/metric-spec/metric-spec.spec.ts
+++ b/web-console/src/druid-models/metric-spec/metric-spec.spec.ts
@@ -16,16 +16,14 @@
  * limitations under the License.
  */
 
-import { JSON_SAMPLE } from '../../utils/sampler.mock';
+import { EMPTY_SAMPLE, JSON_SAMPLE } from '../../utils/sampler.mock';
 
 import { getMetricSpecs } from './metric-spec';
 
 describe('metric-spec', () => {
   describe('getMetricSecs', () => {
     it('works for empty', () => {
-      expect(getMetricSpecs({ header: ['header'], rows: [] }, {}, false)).toEqual([
-        { name: 'count', type: 'count' },
-      ]);
+      expect(getMetricSpecs(EMPTY_SAMPLE, {}, false)).toEqual([{ name: 'count', type: 'count' }]);
     });
 
     it('works with json', () => {
diff --git a/web-console/src/druid-models/metric-spec/metric-spec.tsx b/web-console/src/druid-models/metric-spec/metric-spec.tsx
index 3eb0a24d780c..61acf08e66a3 100644
--- a/web-console/src/druid-models/metric-spec/metric-spec.tsx
+++ b/web-console/src/druid-models/metric-spec/metric-spec.tsx
@@ -23,8 +23,8 @@ import type { Field } from '../../components';
 import { ExternalLink } from '../../components';
 import { getLink } from '../../links';
 import { filterMap, typeIs } from '../../utils';
-import type { SampleHeaderAndRows } from '../../utils/sampler';
-import { guessColumnTypeFromHeaderAndRows } from '../ingestion-spec/ingestion-spec';
+import type { SampleResponse } from '../../utils/sampler';
+import { guessColumnTypeFromSampleResponse } from '../ingestion-spec/ingestion-spec';
 
 export interface MetricSpec {
   readonly type: string;
@@ -388,16 +388,17 @@ export function getMetricSpecOutputType(metricSpec: MetricSpec): string | undefi
 }
 
 export function getMetricSpecs(
-  headerAndRows: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   typeHints: Record<string, string>,
   guessNumericStringsAsNumbers: boolean,
 ): MetricSpec[] {
   return [{ name: 'count', type: 'count' }].concat(
-    filterMap(headerAndRows.header, h => {
+    filterMap(sampleResponse.logicalSegmentSchema, s => {
+      const h = s.name;
       if (h === '__time') return;
       const type =
         typeHints[h] ||
-        guessColumnTypeFromHeaderAndRows(headerAndRows, h, guessNumericStringsAsNumbers);
+        guessColumnTypeFromSampleResponse(sampleResponse, h, guessNumericStringsAsNumbers);
       switch (type) {
         case 'double':
           return { name: `sum_${h}`, type: 'doubleSum', fieldName: h };
diff --git a/web-console/src/helpers/spec-conversion.ts b/web-console/src/helpers/spec-conversion.ts
index 8562bd1f68f1..990147b57ad7 100644
--- a/web-console/src/helpers/spec-conversion.ts
+++ b/web-console/src/helpers/spec-conversion.ts
@@ -36,7 +36,7 @@ import type {
   Transform,
 } from '../druid-models';
 import { inflateDimensionSpec, upgradeSpec } from '../druid-models';
-import { deepGet, filterMap, oneOf } from '../utils';
+import { deepGet, filterMap, nonEmptyArray, oneOf } from '../utils';
 
 export function getSpecDatasourceName(spec: IngestionSpec): string {
   return deepGet(spec, 'spec.dataSchema.dataSource') || 'unknown_datasource';
@@ -86,6 +86,10 @@ export function convertSpecToSql(spec: any): QueryWithContext {
 
   const rollup = deepGet(spec, 'spec.dataSchema.granularitySpec.rollup') ?? true;
 
+  if (nonEmptyArray(deepGet(spec, 'spec.dataSchema.dimensionsSpec.spatialDimensions'))) {
+    throw new Error(`spatialDimensions are not currently supported in SQL-based ingestion`);
+  }
+
   const timestampSpec: TimestampSpec = deepGet(spec, 'spec.dataSchema.timestampSpec');
   if (!timestampSpec) throw new Error(`spec.dataSchema.timestampSpec is not defined`);
 
diff --git a/web-console/src/utils/sampler.mock.ts b/web-console/src/utils/sampler.mock.ts
index a95b73a9457c..3cae4370f969 100644
--- a/web-console/src/utils/sampler.mock.ts
+++ b/web-console/src/utils/sampler.mock.ts
@@ -17,9 +17,18 @@
  */
 
 // Just to make sure we are in a test context. This line will cause trouble if this file is ever compiled into the main build
-import type { SampleHeaderAndRows } from './sampler';
+import type { SampleResponse } from './sampler';
 
-expect(1).toEqual(1);
+expect(1).toEqual(1); // Just to make sure this file does not get included in the build by accident
+
+export const EMPTY_SAMPLE: SampleResponse = {
+  numRowsRead: 0,
+  numRowsIndexed: 0,
+  logicalDimensions: [],
+  physicalDimensions: [],
+  logicalSegmentSchema: [{ name: '__time', type: 'LONG' }],
+  data: [],
+};
 
 /*
 This data is the returned sample when ingested with:
@@ -29,9 +38,45 @@ This data is the returned sample when ingested with:
 {"timestamp":"2016-04-11T09:22:00Z","user":"Alice","followers":3,"spend":5.1,"id":"73534533","tags":["a","b"],"nums":[7,8]}
  */
 
-export const JSON_SAMPLE: SampleHeaderAndRows = {
-  header: ['timestamp', 'user', 'followers', 'spend', 'id', 'tags', 'nums'],
-  rows: [
+export const JSON_SAMPLE: SampleResponse = {
+  numRowsRead: 3,
+  numRowsIndexed: 3,
+  logicalDimensions: [
+    { type: 'string', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    {
+      type: 'long',
+      name: 'followers',
+      multiValueHandling: 'SORTED_ARRAY',
+      createBitmapIndex: false,
+    },
+    { type: 'json', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'string', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+  ],
+  physicalDimensions: [
+    { type: 'json', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    {
+      type: 'json',
+      name: 'followers',
+      multiValueHandling: 'SORTED_ARRAY',
+      createBitmapIndex: true,
+    },
+    { type: 'json', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+  ],
+  logicalSegmentSchema: [
+    { name: '__time', type: 'LONG' },
+    { name: 'user', type: 'STRING' },
+    { name: 'followers', type: 'LONG' },
+    { name: 'spend', type: 'COMPLEX<json>' },
+    { name: 'id', type: 'STRING' },
+    { name: 'tags', type: 'ARRAY<STRING>' },
+    { name: 'nums', type: 'ARRAY<LONG>' },
+  ],
+  data: [
     {
       input: {
         timestamp: '2016-04-11T09:20:00Z',
@@ -43,14 +88,13 @@ export const JSON_SAMPLE: SampleHeaderAndRows = {
         nums: [4],
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:20:00Z',
+        __time: 1460366400000,
         user: 'Alice',
-        followers: '10',
-        spend: '0',
+        followers: 10,
+        spend: 0,
         id: '12232323',
         tags: null,
-        nums: '4',
+        nums: [4],
       },
     },
     {
@@ -64,14 +108,13 @@ export const JSON_SAMPLE: SampleHeaderAndRows = {
         nums: [5, 6],
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:21:00Z',
+        __time: 1460366460000,
         user: 'Bob',
-        followers: '0',
-        spend: '3',
+        followers: 0,
+        spend: 3,
         id: '45345634',
-        tags: 'a',
-        nums: ['5', '6'],
+        tags: ['a'],
+        nums: [5, 6],
       },
     },
     {
@@ -85,14 +128,13 @@ export const JSON_SAMPLE: SampleHeaderAndRows = {
         nums: [7, 8],
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:22:00Z',
+        __time: 1460366520000,
         user: 'Alice',
-        followers: '3',
-        spend: '5.1',
+        followers: 3,
+        spend: 5.1,
         id: '73534533',
         tags: ['a', 'b'],
-        nums: ['7', '8'],
+        nums: [7, 8],
       },
     },
   ],
@@ -119,9 +161,45 @@ SELECT
 FROM test_data
  */
 
-export const CSV_SAMPLE: SampleHeaderAndRows = {
-  header: ['timestamp', 'user', 'followers', 'spend', 'id', 'tags', 'nums'],
-  rows: [
+export const CSV_SAMPLE: SampleResponse = {
+  numRowsRead: 3,
+  numRowsIndexed: 3,
+  logicalDimensions: [
+    { type: 'string', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    {
+      type: 'string',
+      name: 'followers',
+      multiValueHandling: 'SORTED_ARRAY',
+      createBitmapIndex: true,
+    },
+    { type: 'string', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'string', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+  ],
+  physicalDimensions: [
+    { type: 'json', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    {
+      type: 'json',
+      name: 'followers',
+      multiValueHandling: 'SORTED_ARRAY',
+      createBitmapIndex: true,
+    },
+    { type: 'json', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+  ],
+  logicalSegmentSchema: [
+    { name: '__time', type: 'LONG' },
+    { name: 'user', type: 'STRING' },
+    { name: 'followers', type: 'STRING' },
+    { name: 'spend', type: 'STRING' },
+    { name: 'id', type: 'STRING' },
+    { name: 'tags', type: 'COMPLEX<json>' },
+    { name: 'nums', type: 'COMPLEX<json>' },
+  ],
+  data: [
     {
       input: {
         timestamp: '2016-04-11T09:20:00.000Z',
@@ -133,8 +211,7 @@ export const CSV_SAMPLE: SampleHeaderAndRows = {
         nums: '4',
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:20:00.000Z',
+        __time: 1460366400000,
         user: 'Alice',
         followers: '10',
         spend: '0',
@@ -154,8 +231,7 @@ export const CSV_SAMPLE: SampleHeaderAndRows = {
         nums: ['5', '6'],
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:21:00.000Z',
+        __time: 1460366460000,
         user: 'Bob',
         followers: '0',
         spend: '3',
@@ -175,8 +251,7 @@ export const CSV_SAMPLE: SampleHeaderAndRows = {
         nums: ['7', '8'],
       },
       parsed: {
-        __time: 0,
-        timestamp: '2016-04-11T09:22:00.000Z',
+        __time: 1460366520000,
         user: 'Alice',
         followers: '3',
         spend: '5.1',
diff --git a/web-console/src/utils/sampler.spec.ts b/web-console/src/utils/sampler.spec.ts
new file mode 100644
index 000000000000..8fdc505e46ec
--- /dev/null
+++ b/web-console/src/utils/sampler.spec.ts
@@ -0,0 +1,133 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { SampleResponse } from './sampler';
+import { guessDimensionsFromSampleResponse } from './sampler';
+
+describe('sampler', () => {
+  describe('getInferredDimensionsFromSampleResponse', () => {
+    const sampleResponse: SampleResponse = {
+      numRowsRead: 20,
+      numRowsIndexed: 20,
+      logicalDimensions: [
+        {
+          type: 'long',
+          name: 'isRobot',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: false,
+        },
+        {
+          type: 'string',
+          name: 'channel',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+        {
+          type: 'string',
+          name: 'flags',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+        {
+          type: 'long',
+          name: 'isUnpatrolled',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: false,
+        },
+      ],
+      physicalDimensions: [
+        {
+          type: 'json',
+          name: 'isRobot',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+        {
+          type: 'json',
+          name: 'channel',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+        {
+          type: 'json',
+          name: 'flags',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+        {
+          type: 'json',
+          name: 'isUnpatrolled',
+          multiValueHandling: 'SORTED_ARRAY',
+          createBitmapIndex: true,
+        },
+      ],
+      logicalSegmentSchema: [
+        { name: '__time', type: 'LONG' },
+        { name: 'isRobot', type: 'LONG' },
+        { name: 'channel', type: 'STRING' },
+        { name: 'flags', type: 'STRING' },
+        { name: 'isUnpatrolled', type: 'LONG' },
+      ],
+      data: [
+        {
+          input: {
+            isRobot: true,
+            channel: '#sv.wikipedia',
+            timestamp: '2016-06-27T00:00:11.080Z',
+            flags: 'NB',
+            isUnpatrolled: false,
+          },
+          parsed: {
+            __time: 1466985611080,
+            isRobot: true,
+            channel: '#sv.wikipedia',
+            flags: 'NB',
+            isUnpatrolled: false,
+          },
+        },
+      ],
+    };
+
+    it('works', () => {
+      expect(guessDimensionsFromSampleResponse(sampleResponse)).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "name": "isRobot",
+            "type": "string",
+          },
+          Object {
+            "createBitmapIndex": true,
+            "multiValueHandling": "SORTED_ARRAY",
+            "name": "channel",
+            "type": "string",
+          },
+          Object {
+            "createBitmapIndex": true,
+            "multiValueHandling": "SORTED_ARRAY",
+            "name": "flags",
+            "type": "string",
+          },
+          Object {
+            "name": "isUnpatrolled",
+            "type": "string",
+          },
+        ]
+      `);
+    });
+  });
+});
diff --git a/web-console/src/utils/sampler.ts b/web-console/src/utils/sampler.ts
index 1860d4fa2023..88bf7cca0535 100644
--- a/web-console/src/utils/sampler.ts
+++ b/web-console/src/utils/sampler.ts
@@ -20,6 +20,7 @@ import { dedupe } from 'druid-query-toolkit';
 import * as JSONBig from 'json-bigint-native';
 
 import type {
+  DimensionSpec,
   DimensionsSpec,
   IngestionSpec,
   IngestionType,
@@ -32,6 +33,7 @@ import type {
 } from '../druid-models';
 import {
   getDimensionNamesFromTransforms,
+  getDimensionSpecName,
   getSpecType,
   getTimestampSchema,
   isDruidSource,
@@ -43,10 +45,9 @@ import {
 import { Api } from '../singletons';
 
 import { getDruidErrorMessage, queryDruidRune } from './druid-query';
-import { arrangeWithPrefixSuffix, EMPTY_ARRAY, filterMap } from './general';
+import { EMPTY_ARRAY, filterMap } from './general';
 import { deepGet, deepSet } from './object-change';
 
-const SAMPLER_URL = `/druid/indexer/v1/sampler`;
 const BASE_SAMPLER_CONFIG: SamplerConfig = {
   numRows: 500,
   timeoutMs: 15000,
@@ -63,6 +64,38 @@ export interface SamplerConfig {
 
 export interface SampleResponse {
   data: SampleEntry[];
+  logicalSegmentSchema: { name: string; type: string }[];
+  logicalDimensions: DimensionSpec[];
+  physicalDimensions: DimensionSpec[];
+  numRowsIndexed: number;
+  numRowsRead: number;
+}
+
+export function getHeaderNamesFromSampleResponse(
+  sampleResponse: SampleResponse,
+  ignoreTimeColumn = false,
+) {
+  return filterMap(sampleResponse.logicalSegmentSchema, s =>
+    ignoreTimeColumn && s.name === '__time' ? undefined : s.name,
+  );
+}
+
+export function guessDimensionsFromSampleResponse(sampleResponse: SampleResponse): DimensionSpec[] {
+  const { logicalDimensions, physicalDimensions, data } = sampleResponse;
+  return logicalDimensions.map(d => {
+    // Boolean column are currently reported as "long" so let's turn them into "string"
+    if (
+      d.type === 'long' &&
+      physicalDimensions.find(_ => _.name === d.name)?.type === 'json' &&
+      typeof data[0]?.input?.[d.name] === 'boolean'
+    ) {
+      return {
+        name: d.name,
+        type: 'string',
+      };
+    }
+    return d;
+  });
 }
 
 export type CacheRows = Record<string, any>[];
@@ -81,11 +114,6 @@ export interface SampleEntry {
   error?: string;
 }
 
-export interface SampleHeaderAndRows {
-  header: string[];
-  rows: SampleEntry[];
-}
-
 export interface ExampleManifest {
   name: string;
   description: string;
@@ -126,46 +154,6 @@ export function applyCache(sampleSpec: SampleSpec, cacheRows: CacheRows) {
   return sampleSpec;
 }
 
-export interface HeaderFromSampleResponseOptions {
-  sampleResponse: SampleResponse;
-  ignoreTimeColumn?: boolean;
-  columnOrder?: string[];
-  suffixColumnOrder?: string[];
-  useInput?: boolean;
-}
-
-export function headerFromSampleResponse(options: HeaderFromSampleResponseOptions): string[] {
-  const { sampleResponse, ignoreTimeColumn, columnOrder, suffixColumnOrder, useInput } = options;
-
-  const key = useInput ? 'input' : 'parsed';
-  let columns = arrangeWithPrefixSuffix(
-    dedupe(sampleResponse.data.flatMap(s => (s[key] ? Object.keys(s[key]!) : []))),
-    columnOrder || [TIME_COLUMN],
-    suffixColumnOrder || [],
-  );
-
-  if (ignoreTimeColumn) {
-    columns = columns.filter(c => c !== TIME_COLUMN);
-  }
-
-  return columns;
-}
-
-export interface HeaderAndRowsFromSampleResponseOptions extends HeaderFromSampleResponseOptions {
-  parsedOnly?: boolean;
-}
-
-export function headerAndRowsFromSampleResponse(
-  options: HeaderAndRowsFromSampleResponseOptions,
-): SampleHeaderAndRows {
-  const { sampleResponse, parsedOnly } = options;
-
-  return {
-    header: headerFromSampleResponse(options),
-    rows: parsedOnly ? sampleResponse.data.filter(d => d.parsed) : sampleResponse.data,
-  };
-}
-
 export async function getProxyOverlordModules(): Promise<string[]> {
   let statusResp: any;
   try {
@@ -185,7 +173,7 @@ export async function postToSampler(
 
   let sampleResp: any;
   try {
-    sampleResp = await Api.instance.post(`${SAMPLER_URL}?for=${forStr}`, sampleSpec);
+    sampleResp = await Api.instance.post(`/druid/indexer/v1/sampler?for=${forStr}`, sampleSpec);
   } catch (e) {
     throw new Error(getDruidErrorMessage(e));
   }
@@ -332,7 +320,9 @@ export async function sampleForParser(
       dataSchema: {
         dataSource: 'sample',
         timestampSpec: reingestMode ? REINDEX_TIMESTAMP_SPEC : PLACEHOLDER_TIMESTAMP_SPEC,
-        dimensionsSpec: {},
+        dimensionsSpec: {
+          useSchemaDiscovery: true,
+        },
         granularitySpec: {
           rollup: false,
         },
@@ -359,7 +349,9 @@ export async function sampleForTimestamp(
       ioConfig: deepGet(spec, 'spec.ioConfig'),
       dataSchema: {
         dataSource: 'sample',
-        dimensionsSpec: {},
+        dimensionsSpec: {
+          useSchemaDiscovery: true,
+        },
         timestampSpec: timestampSchema === 'column' ? PLACEHOLDER_TIMESTAMP_SPEC : timestampSpec,
         granularitySpec: {
           rollup: false,
@@ -380,7 +372,7 @@ export async function sampleForTimestamp(
   const transforms: Transform[] =
     deepGet(spec, 'spec.dataSchema.transformSpec.transforms') || EMPTY_ARRAY;
 
-  // If we are trying to parts a column then get a bit fancy:
+  // If we are trying to parse a column then get a bit fancy:
   // Query the same sample again (same cache key)
   const sampleSpec: SampleSpec = {
     type: samplerType,
@@ -388,7 +380,9 @@ export async function sampleForTimestamp(
       ioConfig: deepGet(spec, 'spec.ioConfig'),
       dataSchema: {
         dataSource: 'sample',
-        dimensionsSpec: {},
+        dimensionsSpec: {
+          useSchemaDiscovery: true,
+        },
         timestampSpec,
         transformSpec: {
           transforms: transforms.filter(transform => transform.name === TIME_COLUMN),
@@ -430,8 +424,8 @@ export async function sampleForTransform(
   const timestampSpec: TimestampSpec = deepGet(spec, 'spec.dataSchema.timestampSpec');
   const transforms: Transform[] = deepGet(spec, 'spec.dataSchema.transformSpec.transforms') || [];
 
-  // Extra step to simulate auto detecting dimension with transforms
-  let specialDimensionSpec: DimensionsSpec = {};
+  // Extra step to simulate auto-detecting dimension with transforms
+  let specialDimensionSpec: DimensionsSpec = { useSchemaDiscovery: true };
   if (transforms && transforms.length) {
     const sampleSpecHack: SampleSpec = {
       type: samplerType,
@@ -440,7 +434,9 @@ export async function sampleForTransform(
         dataSchema: {
           dataSource: 'sample',
           timestampSpec,
-          dimensionsSpec: {},
+          dimensionsSpec: {
+            useSchemaDiscovery: true,
+          },
           granularitySpec: {
             rollup: false,
           },
@@ -458,10 +454,10 @@ export async function sampleForTransform(
       specialDimensionSpec,
       'dimensions',
       dedupe(
-        headerFromSampleResponse({
-          sampleResponse: sampleResponseHack,
-          ignoreTimeColumn: true,
-        }).concat(getDimensionNamesFromTransforms(transforms)),
+        (
+          guessDimensionsFromSampleResponse(sampleResponseHack) as (DimensionSpec | string)[]
+        ).concat(getDimensionNamesFromTransforms(transforms)),
+        getDimensionSpecName,
       ),
     );
   }
@@ -497,8 +493,8 @@ export async function sampleForFilter(
   const transforms: Transform[] = deepGet(spec, 'spec.dataSchema.transformSpec.transforms') || [];
   const filter: any = deepGet(spec, 'spec.dataSchema.transformSpec.filter');
 
-  // Extra step to simulate auto detecting dimension with transforms
-  let specialDimensionSpec: DimensionsSpec = {};
+  // Extra step to simulate auto-detecting dimension with transforms
+  let specialDimensionSpec: DimensionsSpec = { useSchemaDiscovery: true };
   if (transforms && transforms.length) {
     const sampleSpecHack: SampleSpec = {
       type: samplerType,
@@ -507,7 +503,9 @@ export async function sampleForFilter(
         dataSchema: {
           dataSource: 'sample',
           timestampSpec,
-          dimensionsSpec: {},
+          dimensionsSpec: {
+            useSchemaDiscovery: true,
+          },
           granularitySpec: {
             rollup: false,
           },
@@ -525,10 +523,9 @@ export async function sampleForFilter(
       specialDimensionSpec,
       'dimensions',
       dedupe(
-        headerFromSampleResponse({
-          sampleResponse: sampleResponseHack,
-          ignoreTimeColumn: true,
-        }).concat(getDimensionNamesFromTransforms(transforms)),
+        getHeaderNamesFromSampleResponse(sampleResponseHack, true).concat(
+          getDimensionNamesFromTransforms(transforms),
+        ),
       ),
     );
   }
diff --git a/web-console/src/utils/utils.spec.ts b/web-console/src/utils/utils.spec.ts
index 2d5c1909dc3f..87f8b121a66d 100644
--- a/web-console/src/utils/utils.spec.ts
+++ b/web-console/src/utils/utils.spec.ts
@@ -18,7 +18,7 @@
 
 import type { IngestionSpec } from '../druid-models';
 
-import { applyCache, headerFromSampleResponse } from './sampler';
+import { applyCache } from './sampler';
 
 describe('utils', () => {
   const ingestionSpec: IngestionSpec = {
@@ -52,20 +52,6 @@ describe('utils', () => {
     },
   };
 
-  // const cacheRows: CacheRows = [{ make: 'Honda', model: 'Civic' }, { make: 'BMW', model: 'M3' }];
-
-  it('spec-utils headerFromSampleResponse', () => {
-    expect(
-      headerFromSampleResponse({
-        sampleResponse: { data: [{ input: { a: 1 }, parsed: { a: 1 } }] },
-      }),
-    ).toMatchInlineSnapshot(`
-      Array [
-        "a",
-      ]
-    `);
-  });
-
   it('spec-utils applyCache', () => {
     expect(
       applyCache(
diff --git a/web-console/src/views/load-data-view/filter-table/__snapshots__/filter-table.spec.tsx.snap b/web-console/src/views/load-data-view/filter-table/__snapshots__/filter-table.spec.tsx.snap
index 29a8d96f8406..804196839664 100644
--- a/web-console/src/views/load-data-view/filter-table/__snapshots__/filter-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/filter-table/__snapshots__/filter-table.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`FilterTable matches snapshot 1`] = `
   >
     <div
       class="rt-thead -header"
-      style="min-width: 140px;"
+      style="min-width: 980px;"
     >
       <div
         class="rt-tr"
@@ -31,7 +31,181 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-name"
               >
-                c1
+                __time
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                user
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                followers
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                spend
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                id
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                tags
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                nums
               </div>
               <div
                 class="column-detail"
@@ -49,7 +223,7 @@ exports[`FilterTable matches snapshot 1`] = `
     </div>
     <div
       class="rt-tbody"
-      style="min-width: 140px;"
+      style="min-width: 980px;"
     >
       <div
         class="rt-tr-group"
@@ -64,22 +238,3075 @@ exports[`FilterTable matches snapshot 1`] = `
             role="gridcell"
             style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
-            <div
-              class="table-cell plain"
-            >
-              hello
-            </div>
+            <div
+              class="table-cell timestamp"
+              title="1460366400000"
+            >
+              2016-04-11T09:20:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              10
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              12232323
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell null"
+            >
+              null
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [4]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366460000"
+            >
+              2016-04-11T09:21:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Bob
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              45345634
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [5, 6]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366520000"
+            >
+              2016-04-11T09:22:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              5.1
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              73534533
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a, b]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [7, 8]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -89,16 +3316,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -108,16 +3325,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -146,16 +3353,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -165,16 +3362,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -184,16 +3371,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -203,16 +3380,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -222,16 +3389,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -241,16 +3398,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -279,16 +3426,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -298,16 +3435,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -317,16 +3444,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -336,16 +3453,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -355,16 +3462,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -374,16 +3471,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -412,6 +3499,60 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -431,16 +3572,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -450,16 +3581,42 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -488,16 +3645,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -507,16 +3654,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -526,16 +3663,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -545,16 +3672,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -564,16 +3681,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -583,16 +3690,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -621,16 +3718,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -640,16 +3727,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -659,16 +3736,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -678,16 +3745,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -697,16 +3754,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -716,16 +3763,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -754,16 +3791,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -773,16 +3800,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -792,16 +3809,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -811,16 +3818,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -830,16 +3827,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -849,16 +3836,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -887,16 +3864,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -906,16 +3873,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -925,16 +3882,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -944,16 +3891,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -963,16 +3900,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -982,16 +3909,6 @@ exports[`FilterTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
diff --git a/web-console/src/views/load-data-view/filter-table/filter-table.spec.tsx b/web-console/src/views/load-data-view/filter-table/filter-table.spec.tsx
index c7ae84a76a20..509dd9bd9136 100644
--- a/web-console/src/views/load-data-view/filter-table/filter-table.spec.tsx
+++ b/web-console/src/views/load-data-view/filter-table/filter-table.spec.tsx
@@ -19,23 +19,15 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
+import { JSON_SAMPLE } from '../../../utils/sampler.mock';
+
 import { FilterTable } from './filter-table';
 
 describe('FilterTable', () => {
   it('matches snapshot', () => {
-    const sampleData = {
-      header: ['c1'],
-      rows: [
-        {
-          input: { c1: 'hello' },
-          parsed: { c1: 'hello' },
-        },
-      ],
-    };
-
     const filterTable = (
       <FilterTable
-        sampleData={sampleData}
+        sampleResponse={JSON_SAMPLE}
         columnFilter=""
         dimensionFilters={[]}
         selectedFilterName={undefined}
diff --git a/web-console/src/views/load-data-view/filter-table/filter-table.tsx b/web-console/src/views/load-data-view/filter-table/filter-table.tsx
index 86d10250e2cd..368072762f06 100644
--- a/web-console/src/views/load-data-view/filter-table/filter-table.tsx
+++ b/web-console/src/views/load-data-view/filter-table/filter-table.tsx
@@ -30,22 +30,23 @@ import {
   STANDARD_TABLE_PAGE_SIZE_OPTIONS,
 } from '../../../react-table';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
-import type { SampleEntry, SampleHeaderAndRows } from '../../../utils/sampler';
+import type { SampleEntry, SampleResponse } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../../utils/sampler';
 
 import './filter-table.scss';
 
 export function filterTableSelectedColumnName(
-  sampleData: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   selectedFilter: Partial<DruidFilter> | undefined,
 ): string | undefined {
   if (!selectedFilter) return;
   const selectedFilterName = selectedFilter.dimension;
-  if (!sampleData.header.includes(selectedFilterName)) return;
+  if (!getHeaderNamesFromSampleResponse(sampleResponse).includes(selectedFilterName)) return;
   return selectedFilterName;
 }
 
 export interface FilterTableProps {
-  sampleData: SampleHeaderAndRows;
+  sampleResponse: SampleResponse;
   columnFilter: string;
   dimensionFilters: DruidFilter[];
   selectedFilterName: string | undefined;
@@ -53,17 +54,18 @@ export interface FilterTableProps {
 }
 
 export const FilterTable = React.memo(function FilterTable(props: FilterTableProps) {
-  const { sampleData, columnFilter, dimensionFilters, selectedFilterName, onFilterSelect } = props;
+  const { sampleResponse, columnFilter, dimensionFilters, selectedFilterName, onFilterSelect } =
+    props;
 
   return (
     <ReactTable
       className={classNames('filter-table', DEFAULT_TABLE_CLASS_NAME)}
-      data={sampleData.rows}
+      data={sampleResponse.data}
       sortable={false}
       defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
       pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
-      showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
-      columns={filterMap(sampleData.header, (columnName, i) => {
+      showPagination={sampleResponse.data.length > STANDARD_TABLE_PAGE_SIZE}
+      columns={filterMap(getHeaderNamesFromSampleResponse(sampleResponse), (columnName, i) => {
         if (!caseInsensitiveContains(columnName, columnFilter)) return;
         const timestamp = columnName === '__time';
         const filterIndex = dimensionFilters.findIndex(f => getFilterDimension(f) === columnName);
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 5c08442b689f..499b4f4dd382 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -149,15 +149,15 @@ import type {
   CacheRows,
   ExampleManifest,
   SampleEntry,
-  SampleHeaderAndRows,
   SampleResponse,
   SampleResponseWithExtraInfo,
   SampleStrategy,
 } from '../../utils/sampler';
 import {
   getCacheRowsFromSampleResponse,
+  getHeaderNamesFromSampleResponse,
   getProxyOverlordModules,
-  headerAndRowsFromSampleResponse,
+  guessDimensionsFromSampleResponse,
   sampleForConnect,
   sampleForExampleManifests,
   sampleForFilter,
@@ -237,19 +237,22 @@ function formatSampleEntries(sampleEntries: SampleEntry[], isDruidSource: boolea
   }
 }
 
-function getTimestampSpec(headerAndRows: SampleHeaderAndRows | null): TimestampSpec {
-  if (!headerAndRows) return CONSTANT_TIMESTAMP_SPEC;
+function getTimestampSpec(sampleResponse: SampleResponse | null): TimestampSpec {
+  if (!sampleResponse) return CONSTANT_TIMESTAMP_SPEC;
 
-  const timestampSpecs = filterMap(headerAndRows.header, sampleHeader => {
-    const possibleFormat = possibleDruidFormatForValues(
-      filterMap(headerAndRows.rows, d => (d.parsed ? d.parsed[sampleHeader] : undefined)),
-    );
-    if (!possibleFormat) return;
-    return {
-      column: sampleHeader,
-      format: possibleFormat,
-    };
-  });
+  const timestampSpecs = filterMap(
+    getHeaderNamesFromSampleResponse(sampleResponse),
+    sampleHeader => {
+      const possibleFormat = possibleDruidFormatForValues(
+        filterMap(sampleResponse.data, d => (d.parsed ? d.parsed[sampleHeader] : undefined)),
+      );
+      if (!possibleFormat) return;
+      return {
+        column: sampleHeader,
+        format: possibleFormat,
+      };
+    },
+  );
 
   return (
     timestampSpecs.find(ts => /time/i.test(ts.column)) || // Use a suggestion that has time in the name if possible
@@ -354,30 +357,31 @@ export interface LoadDataViewState {
   inputQueryState: QueryState<SampleResponseWithExtraInfo>;
 
   // for parser
-  parserQueryState: QueryState<SampleHeaderAndRows>;
+  parserQueryState: QueryState<SampleResponse>;
 
   // for flatten
   selectedFlattenField?: SelectedIndex<FlattenField>;
 
   // for timestamp
   timestampQueryState: QueryState<{
-    headerAndRows: SampleHeaderAndRows;
+    sampleResponse: SampleResponse;
     spec: Partial<IngestionSpec>;
   }>;
 
   // for transform
-  transformQueryState: QueryState<SampleHeaderAndRows>;
+  transformQueryState: QueryState<SampleResponse>;
   selectedTransform?: SelectedIndex<Transform>;
 
   // for filter
-  filterQueryState: QueryState<SampleHeaderAndRows>;
+  filterQueryState: QueryState<SampleResponse>;
   selectedFilter?: SelectedIndex<DruidFilter>;
 
   // for schema
   schemaQueryState: QueryState<{
-    headerAndRows: SampleHeaderAndRows;
+    sampleResponse: SampleResponse;
     dimensions: (string | DimensionSpec)[] | undefined;
     metricsSpec: MetricSpec[] | undefined;
+    definedDimensions: boolean;
   }>;
   selectedAutoDimension?: string;
   selectedDimensionSpec?: SelectedIndex<DimensionSpec>;
@@ -1427,10 +1431,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     this.setState(({ parserQueryState }) => ({
       cacheRows: getCacheRowsFromSampleResponse(sampleResponse),
       parserQueryState: new QueryState({
-        data: headerAndRowsFromSampleResponse({
-          sampleResponse,
-          ignoreTimeColumn: true,
-        }),
+        data: sampleResponse,
         lastData: parserQueryState.getSomeData(),
       }),
     }));
@@ -1473,7 +1474,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           </div>
           {data && (
             <ParseDataTable
-              sampleData={data}
+              sampleResponse={data}
               columnFilter={columnFilter}
               canFlatten={canHaveNestedData}
               flattenedColumnsOnly={specialColumnsOnly}
@@ -1492,7 +1493,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     let suggestedFlattenFields: FlattenField[] | undefined;
     if (canHaveNestedData && !flattenFields.length && parserQueryState.data) {
       suggestedFlattenFields = computeFlattenPathsForData(
-        filterMap(parserQueryState.data.rows, r => r.input),
+        filterMap(parserQueryState.data.data, r => r.input),
         'ignore-arrays',
       );
     }
@@ -1668,9 +1669,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     this.setState(({ timestampQueryState }) => ({
       timestampQueryState: new QueryState({
         data: {
-          headerAndRows: headerAndRowsFromSampleResponse({
-            sampleResponse,
-          }),
+          sampleResponse,
           spec,
         },
         lastData: timestampQueryState.getSomeData(),
@@ -1717,7 +1716,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               columnFilter={columnFilter}
               possibleTimestampColumnsOnly={specialColumnsOnly}
               selectedColumnName={parseTimeTableSelectedColumnName(
-                data.headerAndRows,
+                data.sampleResponse,
                 timestampSpec,
               )}
               onTimestampColumnSelect={this.onTimestampColumnSelect}
@@ -1858,9 +1857,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
     this.setState(({ transformQueryState }) => ({
       transformQueryState: new QueryState({
-        data: headerAndRowsFromSampleResponse({
-          sampleResponse,
-        }),
+        data: sampleResponse,
         lastData: transformQueryState.getSomeData(),
       }),
     }));
@@ -1876,7 +1873,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     if (transformQueryState.isInit()) {
       mainFill = <CenterMessage>Please fill in the previous steps</CenterMessage>;
     } else {
-      const data = transformQueryState.getSomeData();
+      const sampleResponse = transformQueryState.getSomeData();
+
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -1892,13 +1890,16 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               disabled={!transforms.length}
             />
           </div>
-          {data && (
+          {sampleResponse && (
             <TransformTable
-              sampleData={data}
+              sampleResponse={sampleResponse}
               columnFilter={columnFilter}
               transformedColumnsOnly={specialColumnsOnly}
               transforms={transforms}
-              selectedColumnName={transformTableSelectedColumnName(data, selectedTransform?.value)}
+              selectedColumnName={transformTableSelectedColumnName(
+                sampleResponse,
+                selectedTransform?.value,
+              )}
               onTransformSelect={this.onTransformSelect}
             />
           )}
@@ -2045,10 +2046,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     if (sampleResponse.data.length) {
       this.setState(({ filterQueryState }) => ({
         filterQueryState: new QueryState({
-          data: headerAndRowsFromSampleResponse({
-            sampleResponse,
-            parsedOnly: true,
-          }),
+          data: sampleResponse,
           lastData: filterQueryState.getSomeData(),
         }),
       }));
@@ -2067,15 +2065,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       return;
     }
 
-    const headerAndRowsNoFilter = headerAndRowsFromSampleResponse({
-      sampleResponse: sampleResponseNoFilter,
-      parsedOnly: true,
-    });
-
     this.setState(({ filterQueryState }) => ({
       // cacheRows: sampleResponseNoFilter.cacheKey,
       filterQueryState: new QueryState({
-        data: deepSet(headerAndRowsNoFilter, 'rows', []),
+        data: sampleResponseNoFilter,
         lastData: filterQueryState.getSomeData(),
       }),
     }));
@@ -2095,7 +2088,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     if (filterQueryState.isInit()) {
       mainFill = <CenterMessage>Please enter more details for the previous steps</CenterMessage>;
     } else {
-      const data = filterQueryState.getSomeData();
+      const filterQuery = filterQueryState.getSomeData();
+
       mainFill = (
         <div className="table-with-control">
           <div className="table-control">
@@ -2105,12 +2099,12 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               placeholder="Search columns"
             />
           </div>
-          {data && (
+          {filterQuery && (
             <FilterTable
-              sampleData={data}
+              sampleResponse={filterQuery}
               columnFilter={columnFilter}
               dimensionFilters={dimensionFilters}
-              selectedFilterName={filterTableSelectedColumnName(data, selectedFilter?.value)}
+              selectedFilterName={filterTableSelectedColumnName(filterQuery, selectedFilter?.value)}
               onFilterSelect={this.onFilterSelect}
             />
           )}
@@ -2243,15 +2237,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     this.setState(({ schemaQueryState }) => ({
       schemaQueryState: new QueryState({
         data: {
-          headerAndRows: headerAndRowsFromSampleResponse({
-            sampleResponse,
-            columnOrder: [TIME_COLUMN].concat(
-              dimensions ? dimensions.map(getDimensionSpecName) : [],
-            ),
-            suffixColumnOrder: metricsSpec ? metricsSpec.map(getMetricSpecName) : undefined,
-          }),
-          dimensions,
+          sampleResponse,
+          dimensions: dimensions || guessDimensionsFromSampleResponse(sampleResponse),
           metricsSpec,
+          definedDimensions: Boolean(dimensions),
         },
         lastData: schemaQueryState.getSomeData(),
       }),
@@ -2569,13 +2558,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         action={async () => {
           const sampleResponse = await sampleForTransform(spec, cacheRows);
           this.updateSpec(
-            updateSchemaWithSample(
-              spec,
-              headerAndRowsFromSampleResponse({ sampleResponse }),
-              getDimensionMode(spec),
-              newRollup,
-              true,
-            ),
+            updateSchemaWithSample(spec, sampleResponse, getDimensionMode(spec), newRollup, true),
           );
         }}
         confirmButtonText={`Yes - ${newRollup ? 'enable' : 'disable'} rollup`}
@@ -2600,12 +2583,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         action={async () => {
           const sampleResponse = await sampleForTransform(spec, cacheRows);
           this.updateSpec(
-            updateSchemaWithSample(
-              spec,
-              headerAndRowsFromSampleResponse({ sampleResponse }),
-              newDimensionMode,
-              getRollup(spec),
-            ),
+            updateSchemaWithSample(spec, sampleResponse, newDimensionMode, getRollup(spec)),
           );
         }}
         confirmButtonText={`Yes - ${autoDetect ? 'auto detect' : 'explicitly set'} columns`}
diff --git a/web-console/src/views/load-data-view/parse-data-table/__snapshots__/parse-data-table.spec.tsx.snap b/web-console/src/views/load-data-view/parse-data-table/__snapshots__/parse-data-table.spec.tsx.snap
index ec7f03e32f68..ccc726a8562a 100644
--- a/web-console/src/views/load-data-view/parse-data-table/__snapshots__/parse-data-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/parse-data-table/__snapshots__/parse-data-table.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`ParseDataTable matches snapshot 1`] = `
   >
     <div
       class="rt-thead -header"
-      style="min-width: 175px;"
+      style="min-width: 875px;"
     >
       <div
         class="rt-tr"
@@ -41,7 +41,7 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-name"
               >
-                c1
+                user
               </div>
               <div
                 class="column-detail"
@@ -55,41 +55,2459 @@ exports[`ParseDataTable matches snapshot 1`] = `
             class="rt-resizer"
           />
         </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                followers
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                spend
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                id
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                tags
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                nums
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="rt-tbody"
+      style="min-width: 875px;"
+    >
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td rt-expandable"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <div
+              class="rt-expander"
+            >
+              •
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              10
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              12232323
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell null"
+            >
+              null
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [4]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -even"
+          role="row"
+        >
+          <div
+            class="rt-td rt-expandable"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <div
+              class="rt-expander"
+            >
+              •
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Bob
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              45345634
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [5, 6]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td rt-expandable"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <div
+              class="rt-expander"
+            >
+              •
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              5.1
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              73534533
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a, b]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [7, 8]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      class="rt-tbody"
-      style="min-width: 175px;"
-    >
       <div
         class="rt-tr-group"
         role="rowgroup"
       >
         <div
-          class="rt-tr -odd"
+          class="rt-tr -padRow -odd"
           role="row"
         >
           <div
-            class="rt-td rt-expandable"
+            class="rt-td"
             role="gridcell"
             style="flex: 35 0 auto; width: 35px; max-width: 35px;"
           >
-            <div
-              class="rt-expander"
-            >
-              •
-            </div>
+            <span>
+               
+            </span>
           </div>
           <div
             class="rt-td"
             role="gridcell"
             style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
-            <div
-              class="table-cell plain"
-            >
-              hello
-            </div>
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
           </div>
         </div>
       </div>
@@ -119,6 +2537,51 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -147,6 +2610,51 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -160,7 +2668,107 @@ exports[`ParseDataTable matches snapshot 1`] = `
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -175,20 +2783,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -231,20 +2829,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -259,20 +2847,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -315,20 +2902,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -343,20 +2920,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -399,20 +2975,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -427,20 +2993,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -483,20 +3048,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -511,20 +3066,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -567,20 +3121,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -595,20 +3139,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -651,20 +3194,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -679,20 +3212,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -735,20 +3267,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -763,20 +3285,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -819,20 +3340,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -847,20 +3367,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -903,20 +3413,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -931,20 +3431,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -987,20 +3486,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1015,20 +3504,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1071,20 +3559,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1099,20 +3577,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1155,20 +3632,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1183,20 +3650,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1239,20 +3705,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1267,20 +3723,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1323,20 +3778,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1351,20 +3796,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1407,20 +3851,10 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
@@ -1435,20 +3869,19 @@ exports[`ParseDataTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
-            style="flex: 35 0 auto; width: 35px; max-width: 35px;"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
             <span>
                
diff --git a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.spec.tsx b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.spec.tsx
index c1ee01bff8fe..448a23dffad6 100644
--- a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.spec.tsx
+++ b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.spec.tsx
@@ -19,23 +19,15 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
+import { JSON_SAMPLE } from '../../../utils/sampler.mock';
+
 import { ParseDataTable } from './parse-data-table';
 
 describe('ParseDataTable', () => {
   it('matches snapshot', () => {
-    const sampleData = {
-      header: ['c1'],
-      rows: [
-        {
-          input: { c1: 'hello' },
-          parsed: { c1: 'hello' },
-        },
-      ],
-    };
-
     const parseDataTable = (
       <ParseDataTable
-        sampleData={sampleData}
+        sampleResponse={JSON_SAMPLE}
         columnFilter=""
         canFlatten={false}
         flattenedColumnsOnly={false}
diff --git a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
index d494791dc4e5..3206851dad8c 100644
--- a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
+++ b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
@@ -30,12 +30,13 @@ import {
   STANDARD_TABLE_PAGE_SIZE_OPTIONS,
 } from '../../../react-table';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
-import type { SampleEntry, SampleHeaderAndRows } from '../../../utils/sampler';
+import type { SampleEntry, SampleResponse } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../../utils/sampler';
 
 import './parse-data-table.scss';
 
 export interface ParseDataTableProps {
-  sampleData: SampleHeaderAndRows;
+  sampleResponse: SampleResponse;
   columnFilter: string;
   canFlatten: boolean;
   flattenedColumnsOnly: boolean;
@@ -46,7 +47,7 @@ export interface ParseDataTableProps {
 
 export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDataTableProps) {
   const {
-    sampleData,
+    sampleResponse,
     columnFilter,
     canFlatten,
     flattenedColumnsOnly,
@@ -59,45 +60,48 @@ export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDat
   return (
     <ReactTable
       className={classNames('parse-data-table', DEFAULT_TABLE_CLASS_NAME)}
-      data={sampleData.rows}
+      data={sampleResponse.data}
       sortable={false}
       defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
       pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
-      showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
-      columns={filterMap(sampleData.header, (columnName, i) => {
-        if (!caseInsensitiveContains(columnName, columnFilter)) return;
-        const flattenFieldIndex = flattenFields.findIndex(f => f.name === columnName);
-        if (flattenFieldIndex === -1 && flattenedColumnsOnly) return;
-        const flattenField = flattenFields[flattenFieldIndex];
-        return {
-          Header: (
-            <div
-              className={classNames({ clickable: flattenField })}
-              onClick={() => {
-                if (!flattenField) return;
-                onFlattenFieldSelect(flattenField, flattenFieldIndex);
-              }}
-            >
-              <div className="column-name">{columnName}</div>
-              <div className="column-detail">
-                {flattenField ? `${flattenField.type}: ${flattenField.expr}` : ''}&nbsp;
+      showPagination={sampleResponse.data.length > STANDARD_TABLE_PAGE_SIZE}
+      columns={filterMap(
+        getHeaderNamesFromSampleResponse(sampleResponse, true),
+        (columnName, i) => {
+          if (!caseInsensitiveContains(columnName, columnFilter)) return;
+          const flattenFieldIndex = flattenFields.findIndex(f => f.name === columnName);
+          if (flattenFieldIndex === -1 && flattenedColumnsOnly) return;
+          const flattenField = flattenFields[flattenFieldIndex];
+          return {
+            Header: (
+              <div
+                className={classNames({ clickable: flattenField })}
+                onClick={() => {
+                  if (!flattenField) return;
+                  onFlattenFieldSelect(flattenField, flattenFieldIndex);
+                }}
+              >
+                <div className="column-name">{columnName}</div>
+                <div className="column-detail">
+                  {flattenField ? `${flattenField.type}: ${flattenField.expr}` : ''}&nbsp;
+                </div>
               </div>
-            </div>
-          ),
-          id: String(i),
-          accessor: (row: SampleEntry) => (row[key] ? row[key]![columnName] : null),
-          width: 140,
-          Cell: function ParseDataTableCell(row: RowRenderProps) {
-            if (row.original.unparseable) {
-              return <TableCellUnparseable />;
-            }
-            return <TableCell value={row.value} />;
-          },
-          headerClassName: classNames({
-            flattened: flattenField,
-          }),
-        };
-      })}
+            ),
+            id: String(i),
+            accessor: (row: SampleEntry) => (row[key] ? row[key]![columnName] : null),
+            width: 140,
+            Cell: function ParseDataTableCell(row: RowRenderProps) {
+              if (row.original.unparseable) {
+                return <TableCellUnparseable />;
+              }
+              return <TableCell value={row.value} />;
+            },
+            headerClassName: classNames({
+              flattened: flattenField,
+            }),
+          };
+        },
+      )}
       SubComponent={rowInfo => {
         const { input, error } = rowInfo.original;
         const inputStr = JSONBig.stringify(input, undefined, 2);
diff --git a/web-console/src/views/load-data-view/parse-time-table/__snapshots__/parse-time-table.spec.tsx.snap b/web-console/src/views/load-data-view/parse-time-table/__snapshots__/parse-time-table.spec.tsx.snap
index 046e4a4a46e9..b6cab0e1c850 100644
--- a/web-console/src/views/load-data-view/parse-time-table/__snapshots__/parse-time-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/parse-time-table/__snapshots__/parse-time-table.spec.tsx.snap
@@ -10,12 +10,183 @@ exports[`ParseTimeTable matches snapshot 1`] = `
   >
     <div
       class="rt-thead -header"
-      style="min-width: 140px;"
+      style="min-width: 1040px;"
     >
       <div
         class="rt-tr"
         role="row"
       >
+        <div
+          class="rt-th timestamp"
+          role="columnheader"
+          style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          tabindex="-1"
+        >
+          <div
+            class=""
+          >
+            <div
+              class=""
+            >
+              <div
+                class="column-name"
+              >
+                __time
+              </div>
+              <div
+                class="column-detail"
+              >
+                Constant: 1970-01-01T00:00:00Z
+                 
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                user
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                followers
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                spend
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                id
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                tags
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
         <div
           class="rt-th rt-resizable-header"
           role="columnheader"
@@ -31,7 +202,7 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-name"
               >
-                c1
+                nums
               </div>
               <div
                 class="column-detail"
@@ -49,7 +220,7 @@ exports[`ParseTimeTable matches snapshot 1`] = `
     </div>
     <div
       class="rt-tbody"
-      style="min-width: 140px;"
+      style="min-width: 1040px;"
     >
       <div
         class="rt-tr-group"
@@ -59,27 +230,3080 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           class="rt-tr -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366400000"
+            >
+              2016-04-11T09:20:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              10
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              12232323
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell null"
+            >
+              null
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [4]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366460000"
+            >
+              2016-04-11T09:21:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Bob
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              45345634
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [5, 6]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366520000"
+            >
+              2016-04-11T09:22:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              5.1
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              73534533
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a, b]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [7, 8]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
             style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
-            <div
-              class="table-cell plain"
-            >
-              hello
-            </div>
+            <span>
+               
+            </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -89,16 +3313,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -108,16 +3322,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -137,6 +3341,24 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -146,16 +3368,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -165,16 +3377,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -184,16 +3386,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -203,16 +3395,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -232,6 +3414,24 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           class="rt-tr -padRow -even"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -241,16 +3441,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -260,16 +3450,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -279,16 +3459,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -298,16 +3468,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -327,6 +3487,24 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -336,16 +3514,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -355,16 +3523,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -374,16 +3532,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -393,16 +3541,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -422,6 +3560,33 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           class="rt-tr -padRow -even"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -431,16 +3596,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -450,16 +3605,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -469,16 +3614,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -495,9 +3630,18 @@ exports[`ParseTimeTable matches snapshot 1`] = `
         role="rowgroup"
       >
         <div
-          class="rt-tr -padRow -even"
+          class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -507,16 +3651,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -526,16 +3660,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -545,16 +3669,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -564,16 +3678,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -583,16 +3687,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -613,24 +3707,14 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td"
+            class="rt-td timestamp"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -640,16 +3724,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -659,16 +3733,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -678,16 +3742,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -697,16 +3751,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -716,16 +3760,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -746,24 +3780,14 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td"
+            class="rt-td timestamp"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -773,16 +3797,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -792,16 +3806,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -811,16 +3815,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -830,16 +3824,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -849,16 +3833,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -879,24 +3853,14 @@ exports[`ParseTimeTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td"
+            class="rt-td timestamp"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -906,16 +3870,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -925,16 +3879,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -944,16 +3888,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -963,16 +3897,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -982,16 +3906,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
diff --git a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.spec.tsx b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.spec.tsx
index f2354445fb67..66cc460946bb 100644
--- a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.spec.tsx
+++ b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.spec.tsx
@@ -22,21 +22,12 @@ import React from 'react';
 import type { IngestionSpec } from '../../../druid-models';
 import { PLACEHOLDER_TIMESTAMP_SPEC } from '../../../druid-models';
 import { deepSet } from '../../../utils';
+import { JSON_SAMPLE } from '../../../utils/sampler.mock';
 
 import { ParseTimeTable } from './parse-time-table';
 
 describe('ParseTimeTable', () => {
   it('matches snapshot', () => {
-    const sampleData = {
-      header: ['c1'],
-      rows: [
-        {
-          input: { c1: 'hello' },
-          parsed: { c1: 'hello' },
-        },
-      ],
-    };
-
     const spec = deepSet(
       {} as IngestionSpec,
       'spec.dataSchema.timestampSpec',
@@ -46,7 +37,7 @@ describe('ParseTimeTable', () => {
     const parseTimeTable = (
       <ParseTimeTable
         sampleBundle={{
-          headerAndRows: sampleData,
+          sampleResponse: JSON_SAMPLE,
           spec,
         }}
         columnFilter=""
diff --git a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
index 36b07766414e..61cc4aeeccca 100644
--- a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
+++ b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
@@ -34,23 +34,29 @@ import {
   STANDARD_TABLE_PAGE_SIZE_OPTIONS,
 } from '../../../react-table';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
-import type { SampleEntry, SampleHeaderAndRows } from '../../../utils/sampler';
+import type { SampleEntry, SampleResponse } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../../utils/sampler';
 
 import './parse-time-table.scss';
 
 export function parseTimeTableSelectedColumnName(
-  sampleData: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   timestampSpec: TimestampSpec | undefined,
 ): string | undefined {
   if (!timestampSpec) return;
   const timestampColumn = timestampSpec.column;
-  if (!timestampColumn || !sampleData.header.includes(timestampColumn)) return;
+  if (
+    !timestampColumn ||
+    !getHeaderNamesFromSampleResponse(sampleResponse).includes(timestampColumn)
+  ) {
+    return;
+  }
   return timestampColumn;
 }
 
 export interface ParseTimeTableProps {
   sampleBundle: {
-    headerAndRows: SampleHeaderAndRows;
+    sampleResponse: SampleResponse;
     spec: Partial<IngestionSpec>;
   };
   columnFilter: string;
@@ -67,76 +73,73 @@ export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTim
     selectedColumnName,
     onTimestampColumnSelect,
   } = props;
-  const { headerAndRows, spec } = sampleBundle;
+  const { sampleResponse, spec } = sampleBundle;
   const timestampSpecColumn = getTimestampSpecColumnFromSpec(spec);
   const timestampDetail = getTimestampDetailFromSpec(spec);
 
   return (
     <ReactTable
       className={classNames('parse-time-table', DEFAULT_TABLE_CLASS_NAME)}
-      data={headerAndRows.rows}
+      data={sampleResponse.data}
       sortable={false}
       defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
       pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
-      showPagination={headerAndRows.rows.length > STANDARD_TABLE_PAGE_SIZE}
-      columns={filterMap(
-        headerAndRows.header.length ? headerAndRows.header : ['__error__'],
-        (columnName, i) => {
-          const isTimestamp = columnName === '__time';
-          if (!isTimestamp && !caseInsensitiveContains(columnName, columnFilter)) return;
-          const used = timestampSpecColumn === columnName;
-          const possibleFormat = isTimestamp
-            ? null
-            : possibleDruidFormatForValues(
-                filterMap(headerAndRows.rows, d => (d.parsed ? d.parsed[columnName] : undefined)),
-              );
-          if (possibleTimestampColumnsOnly && !isTimestamp && !possibleFormat) return;
+      showPagination={sampleResponse.data.length > STANDARD_TABLE_PAGE_SIZE}
+      columns={filterMap(getHeaderNamesFromSampleResponse(sampleResponse), (columnName, i) => {
+        const isTimestamp = columnName === '__time';
+        if (!isTimestamp && !caseInsensitiveContains(columnName, columnFilter)) return;
+        const used = timestampSpecColumn === columnName;
+        const possibleFormat = isTimestamp
+          ? null
+          : possibleDruidFormatForValues(
+              filterMap(sampleResponse.data, d => (d.parsed ? d.parsed[columnName] : undefined)),
+            );
+        if (possibleTimestampColumnsOnly && !isTimestamp && !possibleFormat) return;
 
-          const columnClassName = classNames({
-            timestamp: isTimestamp,
-            used,
-            selected: selectedColumnName === columnName,
-          });
-          return {
-            Header: (
-              <div
-                className={classNames({ clickable: !isTimestamp })}
-                onClick={
-                  isTimestamp
-                    ? undefined
-                    : () => {
-                        onTimestampColumnSelect({
-                          column: columnName,
-                          format: possibleFormat || '!!! Could not auto detect a format !!!',
-                        });
-                      }
-                }
-              >
-                <div className="column-name">{columnName}</div>
-                <div className="column-detail">
-                  {isTimestamp ? timestampDetail : possibleFormat || ''}
-                  &nbsp;
-                </div>
-              </div>
-            ),
-            headerClassName: columnClassName,
-            className: columnClassName,
-            id: String(i),
-            accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
-            Cell: function ParseTimeTableCell(row: RowRenderProps) {
-              if (columnName === '__error__') {
-                return <TableCell value={row.original.error} />;
-              }
-              if (row.original.unparseable) {
-                return <TableCellUnparseable timestamp={isTimestamp} />;
+        const columnClassName = classNames({
+          timestamp: isTimestamp,
+          used,
+          selected: selectedColumnName === columnName,
+        });
+        return {
+          Header: (
+            <div
+              className={classNames({ clickable: !isTimestamp })}
+              onClick={
+                isTimestamp
+                  ? undefined
+                  : () => {
+                      onTimestampColumnSelect({
+                        column: columnName,
+                        format: possibleFormat || '!!! Could not auto detect a format !!!',
+                      });
+                    }
               }
-              return <TableCell value={isTimestamp ? new Date(row.value) : row.value} />;
-            },
-            width: isTimestamp ? 200 : 140,
-            resizable: !isTimestamp,
-          };
-        },
-      )}
+            >
+              <div className="column-name">{columnName}</div>
+              <div className="column-detail">
+                {isTimestamp ? timestampDetail : possibleFormat || ''}
+                &nbsp;
+              </div>
+            </div>
+          ),
+          headerClassName: columnClassName,
+          className: columnClassName,
+          id: String(i),
+          accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
+          Cell: function ParseTimeTableCell(row: RowRenderProps) {
+            if (columnName === '__error__') {
+              return <TableCell value={row.original.error} />;
+            }
+            if (row.original.unparseable) {
+              return <TableCellUnparseable timestamp={isTimestamp} />;
+            }
+            return <TableCell value={isTimestamp ? new Date(row.value) : row.value} />;
+          },
+          width: isTimestamp ? 200 : 140,
+          resizable: !isTimestamp,
+        };
+      })}
     />
   );
 });
diff --git a/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap b/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
index 5e0d3294c93f..a7c677ae0d01 100644
--- a/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/schema-table/__snapshots__/schema-table.spec.tsx.snap
@@ -10,12 +10,186 @@ exports[`SchemaTable matches snapshot 1`] = `
   >
     <div
       class="rt-thead -header"
-      style="min-width: 140px;"
+      style="min-width: 1040px;"
     >
       <div
         class="rt-tr"
         role="row"
       >
+        <div
+          class="rt-th timestamp string rt-resizable-header"
+          role="columnheader"
+          style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                __time
+              </div>
+              <div
+                class="column-detail"
+              >
+                long (time column)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th dimension string rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                user
+              </div>
+              <div
+                class="column-detail"
+              >
+                (auto)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th dimension string rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                followers
+              </div>
+              <div
+                class="column-detail"
+              >
+                (auto)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th dimension string rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                spend
+              </div>
+              <div
+                class="column-detail"
+              >
+                (auto)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th dimension string rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                id
+              </div>
+              <div
+                class="column-detail"
+              >
+                (auto)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th dimension string rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                tags
+              </div>
+              <div
+                class="column-detail"
+              >
+                (auto)
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
         <div
           class="rt-th dimension string rt-resizable-header"
           role="columnheader"
@@ -31,12 +205,12 @@ exports[`SchemaTable matches snapshot 1`] = `
               <div
                 class="column-name"
               >
-                c1
+                nums
               </div>
               <div
                 class="column-detail"
               >
-                string (auto)
+                (auto)
                  
               </div>
             </div>
@@ -49,7 +223,7 @@ exports[`SchemaTable matches snapshot 1`] = `
     </div>
     <div
       class="rt-tbody"
-      style="min-width: 140px;"
+      style="min-width: 1040px;"
     >
       <div
         class="rt-tr-group"
@@ -59,27 +233,3080 @@ exports[`SchemaTable matches snapshot 1`] = `
           class="rt-tr -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366400000"
+            >
+              2016-04-11T09:20:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              10
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              12232323
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell null"
+            >
+              null
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [4]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366460000"
+            >
+              2016-04-11T09:21:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Bob
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              45345634
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a]
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [5, 6]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366520000"
+            >
+              2016-04-11T09:22:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              5.1
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              73534533
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a, b]
+            </div>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [7, 8]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
             style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
-            <div
-              class="table-cell plain"
-            >
-              hello
-            </div>
+            <span>
+               
+            </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -89,16 +3316,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -108,16 +3325,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -137,6 +3344,24 @@ exports[`SchemaTable matches snapshot 1`] = `
           class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -146,16 +3371,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -165,16 +3380,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -184,16 +3389,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -203,16 +3398,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -232,6 +3417,24 @@ exports[`SchemaTable matches snapshot 1`] = `
           class="rt-tr -padRow -even"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -241,16 +3444,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -260,16 +3453,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -279,16 +3462,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -298,16 +3471,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -327,6 +3490,24 @@ exports[`SchemaTable matches snapshot 1`] = `
           class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -336,16 +3517,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -355,16 +3526,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -374,16 +3535,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -393,16 +3544,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -422,6 +3563,33 @@ exports[`SchemaTable matches snapshot 1`] = `
           class="rt-tr -padRow -even"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td dimension string"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -431,16 +3599,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -450,16 +3608,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -469,16 +3617,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -495,9 +3633,18 @@ exports[`SchemaTable matches snapshot 1`] = `
         role="rowgroup"
       >
         <div
-          class="rt-tr -padRow -even"
+          class="rt-tr -padRow -odd"
           role="row"
         >
+          <div
+            class="rt-td timestamp string"
+            role="gridcell"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -507,16 +3654,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -526,16 +3663,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -545,16 +3672,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -564,16 +3681,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -583,16 +3690,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -613,24 +3710,14 @@ exports[`SchemaTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td dimension string"
+            class="rt-td timestamp string"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -640,16 +3727,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -659,16 +3736,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -678,16 +3745,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -697,16 +3754,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -716,16 +3763,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -746,24 +3783,14 @@ exports[`SchemaTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td dimension string"
+            class="rt-td timestamp string"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -773,16 +3800,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -792,16 +3809,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -811,16 +3818,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -830,16 +3827,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -849,16 +3836,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -879,24 +3856,14 @@ exports[`SchemaTable matches snapshot 1`] = `
           role="row"
         >
           <div
-            class="rt-td dimension string"
+            class="rt-td timestamp string"
             role="gridcell"
-            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+            style="flex: 200 0 auto; width: 200px; max-width: 200px;"
           >
             <span>
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -906,16 +3873,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -925,16 +3882,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -944,16 +3891,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -963,16 +3900,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
@@ -982,16 +3909,6 @@ exports[`SchemaTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td dimension string"
             role="gridcell"
diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx b/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
index 626501366645..d19724256cc0 100644
--- a/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
+++ b/web-console/src/views/load-data-view/schema-table/schema-table.spec.tsx
@@ -19,26 +19,19 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
+import { JSON_SAMPLE } from '../../../utils/sampler.mock';
+
 import { SchemaTable } from './schema-table';
 
 describe('SchemaTable', () => {
   it('matches snapshot', () => {
-    const sampleData = {
-      header: ['c1'],
-      rows: [
-        {
-          input: { c1: 'hello' },
-          parsed: { c1: 'hello' },
-        },
-      ],
-    };
-
     const schemaTable = (
       <SchemaTable
         sampleBundle={{
-          headerAndRows: sampleData,
+          sampleResponse: JSON_SAMPLE,
           dimensions: [],
           metricsSpec: [],
+          definedDimensions: false,
         }}
         columnFilter=""
         selectedAutoDimension={undefined}
diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.tsx b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
index caad1162e196..b6ba0e58d325 100644
--- a/web-console/src/views/load-data-view/schema-table/schema-table.tsx
+++ b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
@@ -35,15 +35,17 @@ import {
   STANDARD_TABLE_PAGE_SIZE_OPTIONS,
 } from '../../../react-table';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
-import type { SampleEntry, SampleHeaderAndRows } from '../../../utils/sampler';
+import type { SampleEntry, SampleResponse } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../../utils/sampler';
 
 import './schema-table.scss';
 
 export interface SchemaTableProps {
   sampleBundle: {
-    headerAndRows: SampleHeaderAndRows;
+    sampleResponse: SampleResponse;
     dimensions: (string | DimensionSpec)[] | undefined;
     metricsSpec: MetricSpec[] | undefined;
+    definedDimensions: boolean;
   };
   columnFilter: string;
   selectedAutoDimension: string | undefined;
@@ -65,17 +67,17 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
     onDimensionSelect,
     onMetricSelect,
   } = props;
-  const { headerAndRows, dimensions, metricsSpec } = sampleBundle;
+  const { sampleResponse, dimensions, metricsSpec, definedDimensions } = sampleBundle;
 
   return (
     <ReactTable
       className={classNames('schema-table', DEFAULT_TABLE_CLASS_NAME)}
-      data={headerAndRows.rows}
+      data={sampleResponse.data}
       sortable={false}
       defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
       pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
-      showPagination={headerAndRows.rows.length > STANDARD_TABLE_PAGE_SIZE}
-      columns={filterMap(headerAndRows.header, (columnName, i) => {
+      showPagination={sampleResponse.data.length > STANDARD_TABLE_PAGE_SIZE}
+      columns={filterMap(getHeaderNamesFromSampleResponse(sampleResponse), (columnName, i) => {
         if (!caseInsensitiveContains(columnName, columnFilter)) return;
 
         const metricSpecIndex = metricsSpec
@@ -130,7 +132,7 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
                 onClick={() => {
                   if (isTimestamp) return;
 
-                  if (dimensionSpec) {
+                  if (definedDimensions && dimensionSpec) {
                     onDimensionSelect(inflateDimensionSpec(dimensionSpec), dimensionSpecIndex);
                   } else {
                     onAutoDimensionSelect(columnName);
@@ -139,7 +141,7 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
               >
                 <div className="column-name">{columnName}</div>
                 <div className="column-detail">
-                  {isTimestamp ? 'long (time column)' : dimensionSpecType || 'string (auto)'}&nbsp;
+                  {isTimestamp ? 'long (time column)' : dimensionSpecType || '(auto)'}&nbsp;
                 </div>
               </div>
             ),
diff --git a/web-console/src/views/load-data-view/transform-table/__snapshots__/transform-table.spec.tsx.snap b/web-console/src/views/load-data-view/transform-table/__snapshots__/transform-table.spec.tsx.snap
index 3ed1b238f2ba..5a6165949ff3 100644
--- a/web-console/src/views/load-data-view/transform-table/__snapshots__/transform-table.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/transform-table/__snapshots__/transform-table.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`TransformTable matches snapshot 1`] = `
   >
     <div
       class="rt-thead -header"
-      style="min-width: 140px;"
+      style="min-width: 980px;"
     >
       <div
         class="rt-tr"
@@ -31,7 +31,181 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-name"
               >
-                c1
+                __time
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                user
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                followers
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                spend
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                id
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                tags
+              </div>
+              <div
+                class="column-detail"
+              >
+                
+                 
+              </div>
+            </div>
+          </div>
+          <div
+            class="rt-resizer"
+          />
+        </div>
+        <div
+          class="rt-th rt-resizable-header"
+          role="columnheader"
+          style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          tabindex="-1"
+        >
+          <div
+            class="rt-resizable-header-content"
+          >
+            <div
+              class="clickable"
+            >
+              <div
+                class="column-name"
+              >
+                nums
               </div>
               <div
                 class="column-detail"
@@ -49,7 +223,7 @@ exports[`TransformTable matches snapshot 1`] = `
     </div>
     <div
       class="rt-tbody"
-      style="min-width: 140px;"
+      style="min-width: 980px;"
     >
       <div
         class="rt-tr-group"
@@ -64,22 +238,3075 @@ exports[`TransformTable matches snapshot 1`] = `
             role="gridcell"
             style="flex: 140 0 auto; width: 140px; max-width: 140px;"
           >
-            <div
-              class="table-cell plain"
-            >
-              hello
-            </div>
+            <div
+              class="table-cell timestamp"
+              title="1460366400000"
+            >
+              2016-04-11T09:20:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              10
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              12232323
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell null"
+            >
+              null
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [4]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366460000"
+            >
+              2016-04-11T09:21:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Bob
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              0
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              45345634
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [5, 6]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell timestamp"
+              title="1460366520000"
+            >
+              2016-04-11T09:22:00.000Z
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              Alice
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              3
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              5.1
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              73534533
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [a, b]
+            </div>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <div
+              class="table-cell plain"
+            >
+              [7, 8]
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -odd"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="rt-tr-group"
+        role="rowgroup"
+      >
+        <div
+          class="rt-tr -padRow -even"
+          role="row"
+        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -89,16 +3316,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -108,16 +3325,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -146,16 +3353,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -165,16 +3362,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -184,16 +3371,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -203,16 +3380,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -222,16 +3389,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -241,16 +3398,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -279,16 +3426,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -298,16 +3435,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -317,16 +3444,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -336,16 +3453,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -355,16 +3462,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -374,16 +3471,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -412,6 +3499,60 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -431,16 +3572,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -450,16 +3581,42 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
+          <div
+            class="rt-td"
+            role="gridcell"
+            style="flex: 140 0 auto; width: 140px; max-width: 140px;"
+          >
+            <span>
+               
+            </span>
+          </div>
           <div
             class="rt-td"
             role="gridcell"
@@ -488,16 +3645,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -507,16 +3654,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -526,16 +3663,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -545,16 +3672,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -564,16 +3681,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -583,16 +3690,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -621,16 +3718,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -640,16 +3727,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -659,16 +3736,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -678,16 +3745,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -697,16 +3754,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -716,16 +3763,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -754,16 +3791,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -773,16 +3800,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -792,16 +3809,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -811,16 +3818,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -830,16 +3827,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -849,16 +3836,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -887,16 +3864,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -906,16 +3873,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -925,16 +3882,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -944,16 +3891,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -963,16 +3900,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -odd"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
@@ -982,16 +3909,6 @@ exports[`TransformTable matches snapshot 1`] = `
                
             </span>
           </div>
-        </div>
-      </div>
-      <div
-        class="rt-tr-group"
-        role="rowgroup"
-      >
-        <div
-          class="rt-tr -padRow -even"
-          role="row"
-        >
           <div
             class="rt-td"
             role="gridcell"
diff --git a/web-console/src/views/load-data-view/transform-table/transform-table.spec.tsx b/web-console/src/views/load-data-view/transform-table/transform-table.spec.tsx
index 0cc5459af726..b4b18c042624 100644
--- a/web-console/src/views/load-data-view/transform-table/transform-table.spec.tsx
+++ b/web-console/src/views/load-data-view/transform-table/transform-table.spec.tsx
@@ -19,23 +19,15 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
+import { JSON_SAMPLE } from '../../../utils/sampler.mock';
+
 import { TransformTable } from './transform-table';
 
 describe('TransformTable', () => {
   it('matches snapshot', () => {
-    const sampleData = {
-      header: ['c1'],
-      rows: [
-        {
-          input: { c1: 'hello' },
-          parsed: { c1: 'hello' },
-        },
-      ],
-    };
-
     const transformTable = (
       <TransformTable
-        sampleData={sampleData}
+        sampleResponse={JSON_SAMPLE}
         columnFilter=""
         transformedColumnsOnly={false}
         transforms={[]}
diff --git a/web-console/src/views/load-data-view/transform-table/transform-table.tsx b/web-console/src/views/load-data-view/transform-table/transform-table.tsx
index 5244a7e42ae0..55c4e091fb46 100644
--- a/web-console/src/views/load-data-view/transform-table/transform-table.tsx
+++ b/web-console/src/views/load-data-view/transform-table/transform-table.tsx
@@ -30,22 +30,28 @@ import {
 } from '../../../react-table';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
 import { escapeColumnName } from '../../../utils/druid-expression';
-import type { SampleEntry, SampleHeaderAndRows } from '../../../utils/sampler';
+import type { SampleEntry, SampleResponse } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse } from '../../../utils/sampler';
 
 import './transform-table.scss';
 
 export function transformTableSelectedColumnName(
-  sampleData: SampleHeaderAndRows,
+  sampleResponse: SampleResponse,
   selectedTransform: Partial<Transform> | undefined,
 ): string | undefined {
   if (!selectedTransform) return;
   const selectedTransformName = selectedTransform.name;
-  if (selectedTransformName && !sampleData.header.includes(selectedTransformName)) return;
+  if (
+    selectedTransformName &&
+    !getHeaderNamesFromSampleResponse(sampleResponse).includes(selectedTransformName)
+  ) {
+    return;
+  }
   return selectedTransformName;
 }
 
 export interface TransformTableProps {
-  sampleData: SampleHeaderAndRows;
+  sampleResponse: SampleResponse;
   columnFilter: string;
   transformedColumnsOnly: boolean;
   transforms: Transform[];
@@ -55,7 +61,7 @@ export interface TransformTableProps {
 
 export const TransformTable = React.memo(function TransformTable(props: TransformTableProps) {
   const {
-    sampleData,
+    sampleResponse,
     columnFilter,
     transformedColumnsOnly,
     transforms,
@@ -66,12 +72,12 @@ export const TransformTable = React.memo(function TransformTable(props: Transfor
   return (
     <ReactTable
       className={classNames('transform-table', DEFAULT_TABLE_CLASS_NAME)}
-      data={sampleData.rows}
+      data={sampleResponse.data}
       sortable={false}
       defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
       pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
-      showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
-      columns={filterMap(sampleData.header, (columnName, i) => {
+      showPagination={sampleResponse.data.length > STANDARD_TABLE_PAGE_SIZE}
+      columns={filterMap(getHeaderNamesFromSampleResponse(sampleResponse), (columnName, i) => {
         if (!caseInsensitiveContains(columnName, columnFilter)) return;
         const timestamp = columnName === '__time';
         const transformIndex = transforms.findIndex(f => f.name === columnName);
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
index 0faf4a3dba57..aee24b937048 100644
--- a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
@@ -25,8 +25,8 @@ import React, { useState } from 'react';
 import { AutoForm, CenterMessage, LearnMore, Loader } from '../../../components';
 import type { InputFormat, InputSource } from '../../../druid-models';
 import {
-  guessColumnTypeFromHeaderAndRows,
-  guessIsArrayFromHeaderAndRows,
+  guessColumnTypeFromSampleResponse,
+  guessIsArrayFromSampleResponse,
   INPUT_FORMAT_FIELDS,
   inputFormatOutputsNumericStrings,
   PLACEHOLDER_TIMESTAMP_SPEC,
@@ -41,8 +41,8 @@ import {
   filterMap,
   timeFormatToSql,
 } from '../../../utils';
-import type { SampleHeaderAndRows, SampleSpec } from '../../../utils/sampler';
-import { headerAndRowsFromSampleResponse, postToSampler } from '../../../utils/sampler';
+import type { SampleResponse, SampleSpec } from '../../../utils/sampler';
+import { getHeaderNamesFromSampleResponse, postToSampler } from '../../../utils/sampler';
 import { ParseDataTable } from '../../load-data-view/parse-data-table/parse-data-table';
 
 import './input-format-step.scss';
@@ -80,7 +80,7 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
   );
   const [selectTimestamp, setSelectTimestamp] = useState(true);
 
-  const [previewState] = useQueryManager<InputFormat, SampleHeaderAndRows>({
+  const [previewState] = useQueryManager<InputFormat, SampleResponse>({
     query: inputFormatToSample,
     processQuery: async (inputFormat: InputFormat) => {
       const sampleSpec: SampleSpec = {
@@ -106,53 +106,50 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
         },
       };
 
-      const sampleResponse = await postToSampler(sampleSpec, 'input-format-step');
-
-      return headerAndRowsFromSampleResponse({
-        sampleResponse,
-        ignoreTimeColumn: true,
-        useInput: true,
-      });
+      return await postToSampler(sampleSpec, 'input-format-step');
     },
   });
 
-  const previewData = previewState.data;
+  const previewSampleResponse = previewState.data;
 
   let possibleTimeExpression: PossibleTimeExpression | undefined;
-  if (previewData) {
-    possibleTimeExpression = filterMap(previewData.header, column => {
-      const values = filterMap(previewData.rows, row => row.input?.[column]);
-      const possibleDruidFormat = possibleDruidFormatForValues(values);
-      if (!possibleDruidFormat) return;
-
-      const formatSql = timeFormatToSql(possibleDruidFormat);
-      if (!formatSql) return;
-
-      return {
-        column,
-        timeExpression: formatSql.fillPlaceholders([C(column)]),
-      };
-    })[0];
+  if (previewSampleResponse) {
+    possibleTimeExpression = filterMap(
+      getHeaderNamesFromSampleResponse(previewSampleResponse),
+      column => {
+        const values = filterMap(previewSampleResponse.data, d => d.input?.[column]);
+        const possibleDruidFormat = possibleDruidFormatForValues(values);
+        if (!possibleDruidFormat) return;
+
+        const formatSql = timeFormatToSql(possibleDruidFormat);
+        if (!formatSql) return;
+
+        return {
+          column,
+          timeExpression: formatSql.fillPlaceholders([C(column)]),
+        };
+      },
+    )[0];
   }
 
   const inputFormatAndMore =
-    previewData && AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)
+    previewSampleResponse && AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)
       ? {
           inputFormat,
-          signature: previewData.header.map(name =>
+          signature: getHeaderNamesFromSampleResponse(previewSampleResponse).map(name =>
             SqlColumnDeclaration.create(
               name,
               SqlType.fromNativeType(
-                guessColumnTypeFromHeaderAndRows(
-                  previewData,
+                guessColumnTypeFromSampleResponse(
+                  previewSampleResponse,
                   name,
                   inputFormatOutputsNumericStrings(inputFormat),
                 ),
               ),
             ),
           ),
-          isArrays: previewData.header.map(name =>
-            guessIsArrayFromHeaderAndRows(previewData, name),
+          isArrays: getHeaderNamesFromSampleResponse(previewSampleResponse).map(name =>
+            guessIsArrayFromSampleResponse(previewSampleResponse, name),
           ),
           timeExpression: selectTimestamp ? possibleTimeExpression?.timeExpression : undefined,
         }
@@ -171,9 +168,9 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
         {previewState.error && (
           <CenterMessage>{`Error: ${previewState.getErrorMessage()}`}</CenterMessage>
         )}
-        {previewData && (
+        {previewSampleResponse && (
           <ParseDataTable
-            sampleData={previewData}
+            sampleResponse={previewSampleResponse}
             columnFilter=""
             canFlatten={false}
             flattenedColumnsOnly={false}

From e1000109b4eb9de15ad9034f7f3c825b176780a8 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 3 Apr 2023 00:16:22 -0700
Subject: [PATCH 02/13] supprot kafka format

---
 .../extensions-core/kafka-ingestion.md        |   9 +-
 docs/ingestion/data-formats.md                |   4 +-
 .../ingestion-spec/ingestion-spec.spec.ts     |  30 +-
 .../ingestion-spec/ingestion-spec.tsx         |  69 ++-
 .../input-format/input-format.tsx             | 509 +++++++++++++++++-
 web-console/src/utils/general.tsx             |   7 +
 web-console/src/utils/sampler.ts              |  28 +-
 .../views/load-data-view/load-data-view.tsx   |  79 ++-
 .../input-format-step/input-format-step.tsx   |  16 +-
 .../input-source-step/input-source-step.tsx   |   6 +-
 10 files changed, 658 insertions(+), 99 deletions(-)

diff --git a/docs/development/extensions-core/kafka-ingestion.md b/docs/development/extensions-core/kafka-ingestion.md
index 58636e7f16f1..855ed2a44eb1 100644
--- a/docs/development/extensions-core/kafka-ingestion.md
+++ b/docs/development/extensions-core/kafka-ingestion.md
@@ -38,6 +38,7 @@ This topic covers how to submit a supervisor spec to ingest event data, also kno
 - For a walk-through, see the [Loading from Apache Kafka](../../tutorials/tutorial-kafka.md) tutorial.
 
 ## Kafka support
+
 The Kafka indexing service supports transactional topics introduced in Kafka 0.11.x by default. The consumer for Kafka indexing service is incompatible with older Kafka brokers. If you are using an older version, refer to the [Kafka upgrade guide](https://kafka.apache.org/documentation/#upgrade).
 
 Additionally, you can set `isolation.level` to `read_uncommitted` in `consumerProperties` if either:
@@ -51,6 +52,7 @@ If your Kafka cluster enables consumer-group based ACLs, you can set `group.id`
 To use the Kafka indexing service, load the `druid-kafka-indexing-service` extension on both the Overlord and the MiddleManagers. See [Loading extensions](../extensions.md#loading-extensions) for instructions on how to configure extensions.
 
 ## Define a supervisor spec
+
 Similar to the ingestion spec for batch ingestion, the supervisor spec configures the data ingestion for Kafka streaming ingestion. A supervisor spec has the following sections:
 - `dataSchema` to specify the Druid datasource name, primary timestamp, dimensions, metrics, transforms, and any necessary filters.
 - `ioConfig` to configure Kafka connection settings and configure how Druid parses the data. Kafka-specific connection details go in the `consumerProperties`. The `ioConfig` is also where you define the input format (`inputFormat`) of your Kafka data. For supported formats for Kafka and information on how to configure the input format, see [Data formats](../../ingestion/data-formats.md).  
@@ -128,6 +130,7 @@ The following example demonstrates a supervisor spec for Kafka that uses the `JS
 ```
 
 ### Kafka input format supervisor spec example
+
 If you want to ingest data from other fields in addition to the Kafka message contents, you can use the `kafka` input format. The `kafka` input format lets you ingest:
 - the event key field
 - event headers
@@ -141,7 +144,7 @@ For example, consider the following structure for a message that represents a fi
 - **Event timestamp**: "Nov. 10, 2021 at 14:06"
 
 When you use the `kafka` input format, you configure the way that Druid names the dimensions created from the Kafka message:
-- `headerLabelPrefix`: Supply a prefix to the Kafka headers to avoid any conflicts with named dimensions. The default is `kafka.header`. Considering the header from the example, Druid maps the header to the following column: `kafka.header.environment`.
+- `headerColumnPrefix`: Supply a prefix to the Kafka headers to avoid any conflicts with named dimensions. The default is `kafka.header`. Considering the header from the example, Druid maps the header to the following column: `kafka.header.environment`.
 - `timestampColumnName`: Supply a custom name for the Kafka timestamp in the Druid schema to avoid conflicts with other time columns. The default is `kafka.timestamp`.
 - `keyColumnName`: Supply the name for the Kafka key column in Druid. The default is `kafka.key`.
 Additionally, you must provide information about how Druid should parse the data in the Kafka message:
@@ -159,7 +162,7 @@ Additionally, you must provide information about how Druid should parse the data
 
 For more information on data formats, see [Data formats](../../ingestion/data-formats.md).
 
-Finally, add the Kafka message columns to the `dimensionsSpec`. For the key and timestamp, you can use the dimension names you defined for `keyColumnName` and `timestampColumnName`. For header dimensions, append the header key to the `headerLabelPrefix`. For example `kafka.header.environment`.
+Finally, add the Kafka message columns to the `dimensionsSpec`. For the key and timestamp, you can use the dimension names you defined for `keyColumnName` and `timestampColumnName`. For header dimensions, append the header key to the `headerColumnPrefix`. For example `kafka.header.environment`.
      
 The following supervisor spec demonstrates how to ingest the Kafka header, key, and timestamp into Druid dimensions:
 ```
@@ -174,7 +177,7 @@ The following supervisor spec demonstrates how to ingest the Kafka header, key,
       "topic": "wiki-edits",
       "inputFormat": {
         "type": "kafka",
-        "headerLabelPrefix": "kafka.header.",
+        "headerColumnPrefix": "kafka.header.",
         "timestampColumnName": "kafka.timestamp",
         "keyColumnName": "kafka.key",
         "headerFormat": {
diff --git a/docs/ingestion/data-formats.md b/docs/ingestion/data-formats.md
index 7bf50956a55a..c975f885509f 100644
--- a/docs/ingestion/data-formats.md
+++ b/docs/ingestion/data-formats.md
@@ -170,7 +170,7 @@ Configure the Kafka `inputFormat` to load complete kafka records including heade
 | Field | Type | Description | Required |
 |-------|------|-------------|----------|
 | `type` | String | Set value to `kafka`. | yes |
-| `headerLabelPrefix` | String | Custom label prefix for all the header columns. | no (default = "kafka.header.") |
+| `headerColumnPrefix` | String | Custom prefix for all the header columns. | no (default = "kafka.header.") |
 | `timestampColumnName` | String | Name of the column for the kafka record's timestamp.| no (default = "kafka.timestamp") |
 | `keyColumnName` | String | Name of the column for the kafka record's key.| no (default = "kafka.key") |
 | `headerFormat` | Object | `headerFormat` specifies how to parse the Kafka headers. Supports String types. Because Kafka header values are bytes, the parser decodes them as UTF-8 encoded strings. To change this behavior, implement your own parser based on the encoding style. Change the 'encoding' type in `KafkaStringHeaderFormat` to match your custom implementation. | no |
@@ -183,7 +183,7 @@ For example:
 "ioConfig": {
   "inputFormat": {
       "type": "kafka",
-      "headerLabelPrefix": "kafka.header.",
+      "headerColumnPrefix": "kafka.header.",
       "timestampColumnName": "kafka.timestamp",
       "keyColumnName": "kafka.key",
       "headerFormat":
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
index 69353125e083..3336c1199d35 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
@@ -23,7 +23,7 @@ import {
   cleanSpec,
   guessColumnTypeFromInput,
   guessColumnTypeFromSampleResponse,
-  guessInputFormat,
+  guessSimpleInputFormat,
   upgradeSpec,
 } from './ingestion-spec';
 
@@ -563,26 +563,26 @@ describe('ingestion-spec', () => {
     });
   });
 
-  describe('guessInputFormat', () => {
+  describe('guessSimpleInputFormat', () => {
     it('works for parquet', () => {
-      expect(guessInputFormat(['PAR1lol']).type).toEqual('parquet');
+      expect(guessSimpleInputFormat(['PAR1lol']).type).toEqual('parquet');
     });
 
     it('works for orc', () => {
-      expect(guessInputFormat(['ORClol']).type).toEqual('orc');
+      expect(guessSimpleInputFormat(['ORClol']).type).toEqual('orc');
     });
 
     it('works for AVRO', () => {
-      expect(guessInputFormat(['Obj\x01lol']).type).toEqual('avro_ocf');
-      expect(guessInputFormat(['Obj1lol']).type).toEqual('regex');
+      expect(guessSimpleInputFormat(['Obj\x01lol']).type).toEqual('avro_ocf');
+      expect(guessSimpleInputFormat(['Obj1lol']).type).toEqual('regex');
     });
 
     it('works for JSON (strict)', () => {
-      expect(guessInputFormat(['{"a":1}'])).toEqual({ type: 'json' });
+      expect(guessSimpleInputFormat(['{"a":1}'])).toEqual({ type: 'json' });
     });
 
     it('works for JSON (lax)', () => {
-      expect(guessInputFormat([`{hello:'world'}`])).toEqual({
+      expect(guessSimpleInputFormat([`{hello:'world'}`])).toEqual({
         type: 'json',
         featureSpec: {
           ALLOW_BACKSLASH_ESCAPING_ANY_CHARACTER: true,
@@ -600,14 +600,14 @@ describe('ingestion-spec', () => {
     });
 
     it('works for CSV (with header)', () => {
-      expect(guessInputFormat(['A,B,"X,1",Y'])).toEqual({
+      expect(guessSimpleInputFormat(['A,B,"X,1",Y'])).toEqual({
         type: 'csv',
         findColumnsFromHeader: true,
       });
     });
 
     it('works for CSV (no header)', () => {
-      expect(guessInputFormat(['"A,1","B,2",1,2'])).toEqual({
+      expect(guessSimpleInputFormat(['"A,1","B,2",1,2'])).toEqual({
         type: 'csv',
         findColumnsFromHeader: false,
         columns: ['column1', 'column2', 'column3', 'column4'],
@@ -615,14 +615,14 @@ describe('ingestion-spec', () => {
     });
 
     it('works for TSV (with header)', () => {
-      expect(guessInputFormat(['A\tB\tX\tY'])).toEqual({
+      expect(guessSimpleInputFormat(['A\tB\tX\tY'])).toEqual({
         type: 'tsv',
         findColumnsFromHeader: true,
       });
     });
 
     it('works for TSV (no header)', () => {
-      expect(guessInputFormat(['A\tB\t1\t2\t3\t4\t5\t6\t7\t8\t9'])).toEqual({
+      expect(guessSimpleInputFormat(['A\tB\t1\t2\t3\t4\t5\t6\t7\t8\t9'])).toEqual({
         type: 'tsv',
         findColumnsFromHeader: false,
         columns: [
@@ -642,7 +642,7 @@ describe('ingestion-spec', () => {
     });
 
     it('works for TSV with ;', () => {
-      const inputFormat = guessInputFormat(['A;B;X;Y']);
+      const inputFormat = guessSimpleInputFormat(['A;B;X;Y']);
       expect(inputFormat).toEqual({
         type: 'tsv',
         delimiter: ';',
@@ -651,7 +651,7 @@ describe('ingestion-spec', () => {
     });
 
     it('works for TSV with |', () => {
-      const inputFormat = guessInputFormat(['A|B|X|Y']);
+      const inputFormat = guessSimpleInputFormat(['A|B|X|Y']);
       expect(inputFormat).toEqual({
         type: 'tsv',
         delimiter: '|',
@@ -660,7 +660,7 @@ describe('ingestion-spec', () => {
     });
 
     it('works for regex', () => {
-      expect(guessInputFormat(['A/B/X/Y'])).toEqual({
+      expect(guessSimpleInputFormat(['A/B/X/Y'])).toEqual({
         type: 'regex',
         pattern: '([\\s\\S]*)',
         columns: ['line'],
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index 3bcbbfb2d0b0..a13cbfcd49f7 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -34,6 +34,7 @@ import {
   EMPTY_ARRAY,
   EMPTY_OBJECT,
   filterMap,
+  findMap,
   isSimpleArray,
   oneOf,
   parseCsvLine,
@@ -2137,33 +2138,32 @@ export function updateIngestionType(
 }
 
 export function issueWithSampleData(
-  sampleData: string[],
+  sampleData: SampleResponse,
   spec: Partial<IngestionSpec>,
 ): JSX.Element | undefined {
   if (isStreamingSpec(spec)) return;
 
-  if (sampleData.length) {
-    const firstData = sampleData[0];
+  const firstData: string = findMap(sampleData.data, l => l.input?.raw);
+  if (firstData) return;
 
-    if (firstData === '{') {
-      return (
-        <>
-          This data looks like regular JSON object. For Druid to parse a text file it must have one
-          row per event. Maybe look at{' '}
-          <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
-        </>
-      );
-    }
+  if (firstData === '{') {
+    return (
+      <>
+        This data looks like regular JSON object. For Druid to parse a text file it must have one
+        row per event. Maybe look at{' '}
+        <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
+      </>
+    );
+  }
 
-    if (oneOf(firstData, '[', '[]')) {
-      return (
-        <>
-          This data looks like a multi-line JSON array. For Druid to parse a text file it must have
-          one row per event. Maybe look at{' '}
-          <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
-        </>
-      );
-    }
+  if (oneOf(firstData, '[', '[]')) {
+    return (
+      <>
+        This data looks like a multi-line JSON array. For Druid to parse a text file it must have
+        one row per event. Maybe look at{' '}
+        <ExternalLink href="http://ndjson.org/">newline delimited JSON</ExternalLink> instead.
+      </>
+    );
   }
 
   return;
@@ -2171,13 +2171,19 @@ export function issueWithSampleData(
 
 export function fillInputFormatIfNeeded(
   spec: Partial<IngestionSpec>,
-  sampleData: string[],
+  sampleResponse: SampleResponse,
 ): Partial<IngestionSpec> {
   if (deepGet(spec, 'spec.ioConfig.inputFormat.type')) return spec;
+
   return deepSet(
     spec,
     'spec.ioConfig.inputFormat',
-    guessInputFormat(sampleData, isStreamingSpec(spec)),
+    getSpecType(spec) === 'kafka'
+      ? guessKafkaInputFormat(filterMap(sampleResponse.data, l => l.input))
+      : guessSimpleInputFormat(
+          filterMap(sampleResponse.data, l => l.input?.raw),
+          isStreamingSpec(spec),
+        ),
   );
 }
 
@@ -2185,7 +2191,22 @@ function noNumbers(xs: string[]): boolean {
   return xs.every(x => isNaN(Number(x)));
 }
 
-export function guessInputFormat(sampleRaw: string[], canBeMultiLineJson = false): InputFormat {
+export function guessKafkaInputFormat(sampleRaw: Record<string, any>[]): InputFormat {
+  const hasHeader = sampleRaw.some(x => Object.keys(x).some(k => k.startsWith('kafka.header.')));
+  const keys = filterMap(sampleRaw, x => x['kafka.key']);
+  const payloads = filterMap(sampleRaw, x => x.raw);
+  return {
+    type: 'kafka',
+    headerFormat: hasHeader ? { type: 'string' } : undefined,
+    keyFormat: keys.length ? guessSimpleInputFormat(keys, true) : undefined,
+    valueFormat: guessSimpleInputFormat(payloads, true),
+  };
+}
+
+export function guessSimpleInputFormat(
+  sampleRaw: string[],
+  canBeMultiLineJson = false,
+): InputFormat {
   let sampleDatum = sampleRaw[0];
   if (sampleDatum) {
     sampleDatum = String(sampleDatum); // Really ensure it is a string
diff --git a/web-console/src/druid-models/input-format/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
index 679f3bafb0e4..317ed33c804b 100644
--- a/web-console/src/druid-models/input-format/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 import type { Field } from '../../components';
 import { AutoForm, ExternalLink } from '../../components';
 import { getLink } from '../../links';
-import { compact, oneOf, typeIs } from '../../utils';
+import { compact, deepGet, deepSet, oneOf, typeIs } from '../../utils';
 import type { FlattenSpec } from '../flatten-spec/flatten-spec';
 
 export interface InputFormat {
@@ -39,15 +39,33 @@ export interface InputFormat {
   readonly keepNullColumns?: boolean;
   readonly assumeNewlineDelimited?: boolean;
   readonly useJsonNodeReader?: boolean;
+
+  // type: kafka
+  readonly timestampColumnName?: string;
+  readonly headerFormat?: { type: 'string'; encoding?: string };
+  readonly headerColumnPrefix?: string;
+  readonly keyFormat?: InputFormat;
+  readonly keyColumnName?: string;
+  readonly valueFormat?: InputFormat;
 }
 
-function generateInputFormatFields(streaming: boolean) {
-  return compact([
+function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefined) {
+  const fields = compact([
     {
       name: 'type',
       label: 'Input format',
       type: 'string',
-      suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
+      suggestions: compact([
+        streamingType === 'kafka' ? 'kafka' : undefined,
+        'json',
+        'csv',
+        'tsv',
+        'parquet',
+        'orc',
+        'avro_ocf',
+        'avro_stream',
+        'regex',
+      ]),
       required: true,
       info: (
         <>
@@ -83,12 +101,12 @@ function generateInputFormatFields(streaming: boolean) {
         </>
       ),
     },
-    streaming
+    streamingType
       ? {
           name: 'assumeNewlineDelimited',
           type: 'boolean',
           defined: typeIs('json'),
-          disabled: (inputFormat: InputFormat) => inputFormat.useJsonNodeReader,
+          disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
           defaultValue: false,
           info: (
             <>
@@ -112,13 +130,13 @@ function generateInputFormatFields(streaming: boolean) {
           ),
         }
       : undefined,
-    streaming
+    streamingType
       ? {
           name: 'useJsonNodeReader',
-          title: 'Use JSON node reader',
+          label: 'Use JSON node reader',
           type: 'boolean',
           defined: typeIs('json'),
-          disabled: (inputFormat: InputFormat) => inputFormat.assumeNewlineDelimited,
+          disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
           defaultValue: false,
           info: (
             <>
@@ -222,13 +240,480 @@ function generateInputFormatFields(streaming: boolean) {
       ),
     },
   ] as (Field<InputFormat> | undefined)[]);
+
+  if (streamingType === 'kafka') {
+    fields.push(
+      {
+        name: 'timestampColumnName',
+        label: 'Kafka timestamp column name',
+        type: 'string',
+        defaultValue: 'kafka.timestamp',
+        defined: typeIs('kafka'),
+        info: `Name of the column for the kafka record's timestamp.`,
+      },
+
+      // -----------------------------------------------------
+      // valueFormat fields
+
+      {
+        name: 'valueFormat.type',
+        label: 'Kafka payload input format',
+        type: 'string',
+        suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
+        required: true,
+        defined: typeIs('kafka'),
+        info: (
+          <>
+            <p>The parser used to parse the payload of the Kafka message.</p>
+            <p>
+              For more information see{' '}
+              <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
+                the documentation
+              </ExternalLink>
+              .
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.featureSpec',
+        label: 'Kafka payload JSON parser features',
+        type: 'json',
+        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+        info: (
+          <>
+            <p>
+              <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
+                JSON parser features
+              </ExternalLink>{' '}
+              supported by Jackson library. Those features will be applied when parsing the input
+              JSON data.
+            </p>
+            <p>
+              Example:{' '}
+              <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.assumeNewlineDelimited',
+        label: 'Kafka payload assume newline delimited',
+        type: 'boolean',
+        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+        disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
+        defaultValue: false,
+        info: (
+          <>
+            <p>
+              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
+              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
+              events that are present in the same streaming record will be discarded.
+            </p>
+            <p>
+              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
+              can be <Code>true</Code>) affect only how parsing exceptions are handled.
+            </p>
+            <p>
+              If the input is known to be newline delimited JSON (each individual JSON event is
+              contained in a single line, separated by newlines), setting this option to true allows
+              for more flexible parsing exception handling. Only the lines with invalid JSON syntax
+              will be discarded, while lines containing valid JSON events will still be ingested.
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.useJsonNodeReader',
+        label: 'Kafka payload use JSON node reader',
+        type: 'boolean',
+        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+        disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
+        defaultValue: false,
+        info: (
+          <>
+            {' '}
+            <p>
+              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
+              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
+              events that are present in the same streaming record will be discarded.
+            </p>
+            <p>
+              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
+              can be <Code>true</Code>) affect only how parsing exceptions are handled.
+            </p>
+            <p>
+              When ingesting multi-line JSON events, enabling this option will enable the use of a
+              JSON parser which will retain any valid JSON events encountered within a streaming
+              record prior to when a parsing exception occurred.
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.delimiter',
+        label: 'Kafka payload delimiter',
+        type: 'string',
+        defaultValue: '\t',
+        suggestions: ['\t', ';', '|', '#'],
+        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'tsv',
+        info: <>A custom delimiter for data values.</>,
+      },
+      {
+        name: 'valueFormat.pattern',
+        label: 'Kafka payload pattern',
+        type: 'string',
+        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'regex',
+        required: true,
+      },
+      {
+        name: 'valueFormat.skipHeaderRows',
+        label: 'Kafka payload skip header rows',
+        type: 'number',
+        defaultValue: 0,
+        defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
+        min: 0,
+        info: (
+          <>
+            If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.findColumnsFromHeader',
+        label: 'Kafka payload find columns from header',
+        type: 'boolean',
+        defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
+        required: true,
+        info: (
+          <>
+            If this is set, find the column names from the header row. Note that
+            <Code>skipHeaderRows</Code> will be applied before finding column names from the header.
+            For example, if you set <Code>skipHeaderRows</Code> to 2 and{' '}
+            <Code>findColumnsFromHeader</Code> to true, the task will skip the first two lines and
+            then extract column information from the third line.
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.columns',
+        label: 'Kafka payload columns',
+        type: 'string-array',
+        required: true,
+        defined: inputFormat =>
+          (oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv') &&
+            deepGet(inputFormat, 'valueFormat.findColumnsFromHeader') === false) ||
+          deepGet(inputFormat, 'valueFormat.type') === 'regex',
+        info: (
+          <>
+            Specifies the columns of the data. The columns should be in the same order with the
+            columns of your data.
+          </>
+        ),
+      },
+      {
+        name: 'valueFormat.listDelimiter',
+        label: 'Kafka payload list delimiter',
+        type: 'string',
+        defaultValue: '\x01',
+        suggestions: ['\x01', '\x00'],
+        defined: inputFormat =>
+          oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv', 'regex'),
+        info: <>A custom delimiter for multi-value dimensions.</>,
+      },
+      {
+        name: 'valueFormat.binaryAsString',
+        label: 'Kafka payload list binary as string',
+        type: 'boolean',
+        defaultValue: false,
+        defined: inputFormat =>
+          oneOf(
+            deepGet(inputFormat, 'valueFormat.type'),
+            'parquet',
+            'orc',
+            'avro_ocf',
+            'avro_stream',
+          ),
+        info: (
+          <>
+            Specifies if the binary column which is not logically marked as a string should be
+            treated as a UTF-8 encoded string.
+          </>
+        ),
+      },
+
+      // -----------------------------------------------------
+      // keyFormat fields
+
+      {
+        name: 'keyFormat.type',
+        label: 'Kafka key input format',
+        type: 'string',
+        suggestions: [
+          undefined,
+          'json',
+          'csv',
+          'tsv',
+          'parquet',
+          'orc',
+          'avro_ocf',
+          'avro_stream',
+          'regex',
+        ],
+        placeholder: `(don't parse Kafka key)`,
+        defined: typeIs('kafka'),
+        info: (
+          <>
+            <p>The parser used to parse the key of the Kafka message.</p>
+            <p>
+              For more information see{' '}
+              <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
+                the documentation
+              </ExternalLink>
+              .
+            </p>
+          </>
+        ),
+        adjustment: inputFormat => {
+          const keyFormatType = deepGet(inputFormat, 'keyFormat.type');
+          // If the user selects one of these formats then populate the columns (that are in any case meaningless in this context)
+          // with an initial value.
+          switch (keyFormatType) {
+            case 'regex':
+              inputFormat = deepSet(inputFormat, 'keyFormat.pattern', '([\\s\\S]*)');
+              inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
+              break;
+
+            case 'csv':
+            case 'tsv':
+              inputFormat = deepSet(inputFormat, 'keyFormat.findColumnsFromHeader', false);
+              inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
+              break;
+          }
+          return inputFormat;
+        },
+      },
+      {
+        name: 'keyFormat.featureSpec',
+        label: 'Kafka key JSON parser features',
+        type: 'json',
+        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+        hideInMore: true,
+        info: (
+          <>
+            <p>
+              <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
+                JSON parser features
+              </ExternalLink>{' '}
+              supported by Jackson library. Those features will be applied when parsing the input
+              JSON data.
+            </p>
+            <p>
+              Example:{' '}
+              <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.assumeNewlineDelimited',
+        label: 'Kafka key assume newline delimited',
+        type: 'boolean',
+        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+        disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
+        defaultValue: false,
+        hideInMore: true,
+        info: (
+          <>
+            <p>
+              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
+              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
+              events that are present in the same streaming record will be discarded.
+            </p>
+            <p>
+              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
+              can be <Code>true</Code>) affect only how parsing exceptions are handled.
+            </p>
+            <p>
+              If the input is known to be newline delimited JSON (each individual JSON event is
+              contained in a single line, separated by newlines), setting this option to true allows
+              for more flexible parsing exception handling. Only the lines with invalid JSON syntax
+              will be discarded, while lines containing valid JSON events will still be ingested.
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.useJsonNodeReader',
+        label: 'Kafka key use JSON node reader',
+        type: 'boolean',
+        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+        disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
+        defaultValue: false,
+        hideInMore: true,
+        info: (
+          <>
+            {' '}
+            <p>
+              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
+              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
+              events that are present in the same streaming record will be discarded.
+            </p>
+            <p>
+              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
+              can be <Code>true</Code>) affect only how parsing exceptions are handled.
+            </p>
+            <p>
+              When ingesting multi-line JSON events, enabling this option will enable the use of a
+              JSON parser which will retain any valid JSON events encountered within a streaming
+              record prior to when a parsing exception occurred.
+            </p>
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.delimiter',
+        label: 'Kafka key delimiter',
+        type: 'string',
+        defaultValue: '\t',
+        suggestions: ['\t', ';', '|', '#'],
+        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'tsv',
+        info: <>A custom delimiter for data values.</>,
+      },
+      {
+        name: 'keyFormat.pattern',
+        label: 'Kafka key pattern',
+        type: 'string',
+        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'regex',
+        required: true,
+      },
+      {
+        name: 'keyFormat.skipHeaderRows',
+        label: 'Kafka key skip header rows',
+        type: 'number',
+        defaultValue: 0,
+        defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
+        min: 0,
+        info: (
+          <>
+            If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.findColumnsFromHeader',
+        label: 'Kafka key find columns from header',
+        type: 'boolean',
+        defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
+        required: true,
+        hideInMore: true,
+        info: (
+          <>
+            If this is set, find the column names from the header row. Note that
+            <Code>skipHeaderRows</Code> will be applied before finding column names from the header.
+            For example, if you set <Code>skipHeaderRows</Code> to 2 and{' '}
+            <Code>findColumnsFromHeader</Code> to true, the task will skip the first two lines and
+            then extract column information from the third line.
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.columns',
+        label: 'Kafka key columns',
+        type: 'string-array',
+        required: true,
+        defined: inputFormat =>
+          (oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv') &&
+            deepGet(inputFormat, 'keyFormat.findColumnsFromHeader') === false) ||
+          deepGet(inputFormat, 'keyFormat.type') === 'regex',
+        hideInMore: true,
+        info: (
+          <>
+            Only the value of the first column will be read, the name of the column will be ignored
+            so enter anything here.
+          </>
+        ),
+      },
+      {
+        name: 'keyFormat.listDelimiter',
+        label: 'Kafka key list delimiter',
+        type: 'string',
+        defaultValue: '\x01',
+        suggestions: ['\x01', '\x00'],
+        defined: inputFormat =>
+          oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv', 'regex'),
+        info: <>A custom delimiter for multi-value dimensions.</>,
+      },
+      {
+        name: 'keyFormat.binaryAsString',
+        label: 'Kafka key list binary as string',
+        type: 'boolean',
+        defaultValue: false,
+        defined: inputFormat =>
+          oneOf(
+            deepGet(inputFormat, 'valueFormat.type'),
+            'parquet',
+            'orc',
+            'avro_ocf',
+            'avro_stream',
+          ),
+        info: (
+          <>
+            Specifies if the binary column which is not logically marked as a string should be
+            treated as a UTF-8 encoded string.
+          </>
+        ),
+      },
+
+      // keyColumnName
+      {
+        name: 'keyColumnName',
+        label: 'Kafka key column name',
+        type: 'string',
+        defaultValue: 'kafka.key',
+        defined: inputFormat => Boolean(deepGet(inputFormat, 'keyFormat.type')),
+        info: `Custom prefix for all the header columns.`,
+      },
+
+      // -----------------------------------------------------
+
+      {
+        name: 'headerFormat.type',
+        label: 'Kafka header format type',
+        type: 'string',
+        defined: typeIs('kafka'),
+        placeholder: `(don't parse Kafka herders)`,
+        suggestions: [undefined, 'string'],
+      },
+      {
+        name: 'headerFormat.encoding',
+        label: 'Kafka header format encoding',
+        type: 'string',
+        defaultValue: 'UTF-8',
+        defined: inputFormat => deepGet(inputFormat, 'headerFormat.type') === 'string',
+        suggestions: ['UTF-8', 'UTF-16BE', 'UTF-16LE', 'UTF-16', 'US-ASCII', 'ISO-8859-1'],
+      },
+      {
+        name: 'headerColumnPrefix',
+        label: 'Kafka header column prefix',
+        type: 'string',
+        defaultValue: 'kafka.header.',
+        defined: typeIs('kafka'),
+        info: `Custom prefix for all the header columns.`,
+      },
+    );
+  }
+
+  return fields;
 }
 
-export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(false);
-export const STREAMING_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(true);
+export const BATCH_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(undefined);
+export const KINESIS_INPUT_FORMAT_FIELDS: Field<InputFormat>[] =
+  generateInputFormatFields('kinesis');
+export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields('kafka');
 
 export function issueWithInputFormat(inputFormat: InputFormat | undefined): string | undefined {
-  return AutoForm.issueWithModel(inputFormat, INPUT_FORMAT_FIELDS);
+  return AutoForm.issueWithModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS);
 }
 
 export const inputFormatCanProduceNestedData: (inputFormat: InputFormat) => boolean = typeIs(
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index 9140452947c9..3b29dceafdcd 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -278,6 +278,13 @@ export function filterMap<T, Q>(xs: readonly T[], f: (x: T, i: number) => Q | un
   return xs.map(f).filter((x: Q | undefined) => typeof x !== 'undefined') as Q[];
 }
 
+export function findMap<T, Q>(
+  xs: readonly T[],
+  f: (x: T, i: number) => Q | undefined,
+): Q | undefined {
+  return filterMap(xs, f)[0];
+}
+
 export function compact<T>(xs: (T | undefined | false | null | '')[]): T[] {
   return xs.filter(Boolean) as T[];
 }
diff --git a/web-console/src/utils/sampler.ts b/web-console/src/utils/sampler.ts
index 88bf7cca0535..00988f2af5c4 100644
--- a/web-console/src/utils/sampler.ts
+++ b/web-console/src/utils/sampler.ts
@@ -217,6 +217,23 @@ function fixSamplerTypes(sampleSpec: SampleSpec): SampleSpec {
   return sampleSpec;
 }
 
+const WHOLE_ROW_INPUT_FORMAT: InputFormat = {
+  type: 'regex',
+  pattern: '([\\s\\S]*)', // Match the entire line, every single character
+  listDelimiter: '56616469-6de2-9da4-efb8-8f416e6e6965', // Just a UUID to disable the list delimiter, let's hope we do not see this UUID in the data
+  columns: ['raw'],
+};
+
+const KAFKA_SAMPLE_INPUT_FORMAT: InputFormat = {
+  type: 'kafka',
+  headerFormat: {
+    type: 'string',
+    encoding: 'UTF-8',
+  },
+  keyFormat: WHOLE_ROW_INPUT_FORMAT,
+  valueFormat: WHOLE_ROW_INPUT_FORMAT,
+};
+
 export async function sampleForConnect(
   spec: Partial<IngestionSpec>,
   sampleStrategy: SampleStrategy,
@@ -230,12 +247,11 @@ export async function sampleForConnect(
 
   const reingestMode = isDruidSource(spec);
   if (!reingestMode) {
-    ioConfig = deepSet(ioConfig, 'inputFormat', {
-      type: 'regex',
-      pattern: '([\\s\\S]*)', // Match the entire line, every single character
-      listDelimiter: '56616469-6de2-9da4-efb8-8f416e6e6965', // Just a UUID to disable the list delimiter, let's hope we do not see this UUID in the data
-      columns: ['raw'],
-    });
+    ioConfig = deepSet(
+      ioConfig,
+      'inputFormat',
+      samplerType === 'kafka' ? KAFKA_SAMPLE_INPUT_FORMAT : WHOLE_ROW_INPUT_FORMAT,
+    );
   }
 
   const sampleSpec: SampleSpec = {
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 499b4f4dd382..35acba45a781 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -73,6 +73,7 @@ import {
   addTimestampTransform,
   adjustForceGuaranteedRollup,
   adjustId,
+  BATCH_INPUT_FORMAT_FIELDS,
   cleanSpec,
   computeFlattenPathsForData,
   CONSTANT_TIMESTAMP_SPEC,
@@ -95,10 +96,10 @@ import {
   getRequiredModule,
   getRollup,
   getSecondaryPartitionRelatedFormFields,
+  getSpecType,
   getTimestampExpressionFields,
   getTimestampSchema,
   getTuningFormFields,
-  INPUT_FORMAT_FIELDS,
   inputFormatCanProduceNestedData,
   invalidIoConfig,
   invalidPartitionConfig,
@@ -108,6 +109,8 @@ import {
   issueWithIoConfig,
   issueWithSampleData,
   joinFilter,
+  KAFKA_INPUT_FORMAT_FIELDS,
+  KINESIS_INPUT_FORMAT_FIELDS,
   KNOWN_FILTER_TYPES,
   MAX_INLINE_DATA_LENGTH,
   METRIC_SPEC_FIELDS,
@@ -117,7 +120,6 @@ import {
   PRIMARY_PARTITION_RELATED_FORM_FIELDS,
   removeTimestampTransform,
   splitFilter,
-  STREAMING_INPUT_FORMAT_FIELDS,
   TIME_COLUMN,
   TIMESTAMP_SPEC_FIELDS,
   TRANSFORM_FIELDS,
@@ -129,6 +131,7 @@ import { getLink } from '../../links';
 import { Api, AppToaster, UrlBaser } from '../../singletons';
 import {
   alphanumericCompare,
+  compact,
   deepDelete,
   deepGet,
   deepSet,
@@ -213,28 +216,49 @@ function showRawLine(line: SampleEntry): string {
 }
 
 function showDruidLine(line: SampleEntry): string {
-  if (!line.input) return 'Invalid row';
-  return `Druid row: ${JSONBig.stringify(line.input)}`;
+  if (!line.input) return 'Invalid druid row';
+  return `[Druid row: ${JSONBig.stringify(line.input)}]`;
+}
+
+function showKafkaLine(line: SampleEntry): string {
+  const { input } = line;
+  if (!input) return 'Invalid kafka row';
+  return compact([
+    `[ Kafka timestamp: ${input['kafka.timestamp']}`,
+    ...filterMap(Object.entries(input), ([k, v]) => {
+      if (!k.startsWith('kafka.header.')) return;
+      return `  Header: ${k.slice(13)}=${v}`;
+    }),
+    input['kafka.key'] ? `  Key: ${input['kafka.key']}` : undefined,
+    `  Payload: ${input.raw}`,
+    ']',
+  ]).join('\n');
 }
 
 function showBlankLine(line: SampleEntry): string {
   return line.parsed ? `[Row: ${JSONBig.stringify(line.parsed)}]` : '[Binary data]';
 }
 
-function formatSampleEntries(sampleEntries: SampleEntry[], isDruidSource: boolean): string {
-  if (sampleEntries.length) {
-    if (isDruidSource) {
-      return sampleEntries.map(showDruidLine).join('\n');
-    }
+function formatSampleEntries(
+  sampleEntries: SampleEntry[],
+  druidSource: boolean,
+  kafkaSource: boolean,
+): string {
+  if (!sampleEntries.length) return 'No data returned from sampler';
 
-    return (
-      sampleEntries.every(l => !l.parsed)
-        ? sampleEntries.map(showBlankLine)
-        : sampleEntries.map(showRawLine)
-    ).join('\n');
-  } else {
-    return 'No data returned from sampler';
+  if (druidSource) {
+    return sampleEntries.map(showDruidLine).join('\n');
+  }
+
+  if (kafkaSource) {
+    return sampleEntries.map(showKafkaLine).join('\n');
   }
+
+  return (
+    sampleEntries.every(l => !l.parsed)
+      ? sampleEntries.map(showBlankLine)
+      : sampleEntries.map(showRawLine)
+  ).join('\n');
 }
 
 function getTimestampSpec(sampleResponse: SampleResponse | null): TimestampSpec {
@@ -1215,6 +1239,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     const ioConfig: IoConfig = deepGet(spec, 'spec.ioConfig') || EMPTY_OBJECT;
     const inlineMode = deepGet(spec, 'spec.ioConfig.inputSource.type') === 'inline';
     const druidSource = isDruidSource(spec);
+    const kafkaSource = getSpecType(spec) === 'kafka';
 
     let mainFill: JSX.Element | string;
     if (inlineMode) {
@@ -1246,7 +1271,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
             <TextArea
               className="raw-lines"
               readOnly
-              value={formatSampleEntries(inputData, druidSource)}
+              value={formatSampleEntries(inputData, druidSource, kafkaSource)}
             />
           )}
           {inputQueryState.isLoading() && <Loader />}
@@ -1368,11 +1393,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
               this.updateSpec(fillDataSourceNameIfNeeded(newSpec));
             } else {
-              const sampleLines = filterMap(inputQueryState.data.data, l =>
-                l.input ? l.input.raw : undefined,
-              );
-
-              const issue = issueWithSampleData(sampleLines, spec);
+              const issue = issueWithSampleData(inputData, spec);
               if (issue) {
                 AppToaster.show({
                   icon: IconNames.WARNING_SIGN,
@@ -1383,9 +1404,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 return false;
               }
 
-              this.updateSpec(
-                fillDataSourceNameIfNeeded(fillInputFormatIfNeeded(spec, sampleLines)),
-              );
+              this.updateSpec(fillDataSourceNameIfNeeded(fillInputFormatIfNeeded(spec, inputData)));
             }
             return true;
           },
@@ -1498,9 +1517,13 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       );
     }
 
-    const inputFormatFields = isStreamingSpec(spec)
-      ? STREAMING_INPUT_FORMAT_FIELDS
-      : INPUT_FORMAT_FIELDS;
+    const specType = getSpecType(spec);
+    const inputFormatFields =
+      specType === 'kafka'
+        ? KAFKA_INPUT_FORMAT_FIELDS
+        : specType === 'kinesis'
+        ? KINESIS_INPUT_FORMAT_FIELDS
+        : BATCH_INPUT_FORMAT_FIELDS;
     return (
       <>
         <div className="main">{mainFill}</div>
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
index aee24b937048..7da27679e281 100644
--- a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
@@ -25,9 +25,9 @@ import React, { useState } from 'react';
 import { AutoForm, CenterMessage, LearnMore, Loader } from '../../../components';
 import type { InputFormat, InputSource } from '../../../druid-models';
 import {
+  BATCH_INPUT_FORMAT_FIELDS,
   guessColumnTypeFromSampleResponse,
   guessIsArrayFromSampleResponse,
-  INPUT_FORMAT_FIELDS,
   inputFormatOutputsNumericStrings,
   PLACEHOLDER_TIMESTAMP_SPEC,
   possibleDruidFormatForValues,
@@ -76,7 +76,7 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
 
   const [inputFormat, setInputFormat] = useState<Partial<InputFormat>>(initInputFormat);
   const [inputFormatToSample, setInputFormatToSample] = useState<InputFormat | undefined>(
-    AutoForm.isValidModel(initInputFormat, INPUT_FORMAT_FIELDS) ? initInputFormat : undefined,
+    AutoForm.isValidModel(initInputFormat, BATCH_INPUT_FORMAT_FIELDS) ? initInputFormat : undefined,
   );
   const [selectTimestamp, setSelectTimestamp] = useState(true);
 
@@ -133,7 +133,7 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
   }
 
   const inputFormatAndMore =
-    previewSampleResponse && AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)
+    previewSampleResponse && AutoForm.isValidModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS)
       ? {
           inputFormat,
           signature: getHeaderNamesFromSampleResponse(previewSampleResponse).map(name =>
@@ -188,15 +188,19 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
               <LearnMore href={`${getLink('DOCS')}/ingestion/data-formats.html`} />
             </Callout>
           </FormGroup>
-          <AutoForm fields={INPUT_FORMAT_FIELDS} model={inputFormat} onChange={setInputFormat} />
+          <AutoForm
+            fields={BATCH_INPUT_FORMAT_FIELDS}
+            model={inputFormat}
+            onChange={setInputFormat}
+          />
           {inputFormatToSample !== inputFormat && (
             <FormGroup className="control-buttons">
               <Button
                 text="Preview changes"
                 intent={Intent.PRIMARY}
-                disabled={!AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)}
+                disabled={!AutoForm.isValidModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS)}
                 onClick={() => {
-                  if (!AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)) return;
+                  if (!AutoForm.isValidModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS)) return;
                   setInputFormatToSample(inputFormat);
                 }}
               />
diff --git a/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx b/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx
index 4a8ba96f2600..b18cbae4aef1 100644
--- a/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx
+++ b/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx
@@ -39,7 +39,7 @@ import {
   externalConfigToTableExpression,
   getIngestionImage,
   getIngestionTitle,
-  guessInputFormat,
+  guessSimpleInputFormat,
   INPUT_SOURCE_FIELDS,
   PLACEHOLDER_TIMESTAMP_SPEC,
 } from '../../../druid-models';
@@ -61,7 +61,7 @@ import './input-source-step.scss';
 
 function resultToInputFormat(result: QueryResult): InputFormat {
   if (!result.rows.length) throw new Error('No data returned from sample query');
-  return guessInputFormat(result.rows.map((r: any) => r[0]));
+  return guessSimpleInputFormat(result.rows.map((r: any) => r[0]));
 }
 
 const BOGUS_LIST_DELIMITER = '56616469-6de2-9da4-efb8-8f416e6e6965'; // Just a UUID to disable the list delimiter, let's hope we do not see this UUID in the data
@@ -129,7 +129,7 @@ export const InputSourceStep = React.memo(function InputSourceStep(props: InputS
         );
 
         if (!sampleLines.length) throw new Error('No data returned from sampler');
-        guessedInputFormat = guessInputFormat(sampleLines);
+        guessedInputFormat = guessSimpleInputFormat(sampleLines);
       } else {
         const tableExpression = externalConfigToTableExpression({
           inputSource,

From fb7d526eff351a981b26cd848ed47242f037b47e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 3 Apr 2023 09:22:23 -0700
Subject: [PATCH 03/13] update DQT, fix tests

---
 licenses.yaml                            |  2 +-
 web-console/e2e-tests/reindexing.spec.ts |  8 ++++----
 web-console/package-lock.json            | 14 +++++++-------
 web-console/package.json                 |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/licenses.yaml b/licenses.yaml
index 238af9db034e..3df70dab9430 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5733,7 +5733,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 0.18.2
+version: 0.18.3
 
 ---
 
diff --git a/web-console/e2e-tests/reindexing.spec.ts b/web-console/e2e-tests/reindexing.spec.ts
index ebf75c0e78fa..9a9cd617df30 100644
--- a/web-console/e2e-tests/reindexing.spec.ts
+++ b/web-console/e2e-tests/reindexing.spec.ts
@@ -116,7 +116,7 @@ function validateConnectLocalData(preview: string) {
   expect(lines.length).toBe(500);
   const firstLine = lines[0];
   expect(firstLine).toBe(
-    'Druid row: {' +
+    '[Druid row: {' +
       '"__time":1442018818771' +
       ',"channel":"#en.wikipedia"' +
       ',"comment":"added project"' +
@@ -131,11 +131,11 @@ function validateConnectLocalData(preview: string) {
       ',"added":36' +
       ',"deleted":0' +
       ',"delta":36' +
-      '}',
+      '}]',
   );
   const lastLine = lines[lines.length - 1];
   expect(lastLine).toBe(
-    'Druid row: {' +
+    '[Druid row: {' +
       '"__time":1442020314823' +
       ',"channel":"#en.wikipedia"' +
       ',"comment":"/* History */[[WP:AWB/T|Typo fixing]], [[WP:AWB/T|typo(s) fixed]]: nothern → northern using [[Project:AWB|AWB]]"' +
@@ -150,7 +150,7 @@ function validateConnectLocalData(preview: string) {
       ',"added":1' +
       ',"deleted":0' +
       ',"delta":1' +
-      '}',
+      '}]',
   );
 }
 
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index b9aefc10dead..4d0db223d82d 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -22,7 +22,7 @@
         "d3-axis": "^2.1.0",
         "d3-scale": "^3.3.0",
         "d3-selection": "^2.0.0",
-        "druid-query-toolkit": "^0.18.2",
+        "druid-query-toolkit": "^0.18.3",
         "file-saver": "^2.0.2",
         "follow-redirects": "^1.14.7",
         "fontsource-open-sans": "^3.0.9",
@@ -8211,9 +8211,9 @@
       }
     },
     "node_modules/druid-query-toolkit": {
-      "version": "0.18.2",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.18.2.tgz",
-      "integrity": "sha512-MUqTm6wW+clI0pVeK9RIdB8svWK6mu44zsAw8BSVZYYKchigbBzTgwJe0vAYFBfR0TPjD1gJl62pSw4g0F14fQ==",
+      "version": "0.18.3",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.18.3.tgz",
+      "integrity": "sha512-Za2U2NsFyun5HXeWnLCICnTFzZp4aC17aSOjgVbQgEWZNMPht51U4paE3SVhPDObkWDjDUYAqVv+mO+ZyMx9Og==",
       "dependencies": {
         "tslib": "^2.3.1"
       },
@@ -32625,9 +32625,9 @@
       }
     },
     "druid-query-toolkit": {
-      "version": "0.18.2",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.18.2.tgz",
-      "integrity": "sha512-MUqTm6wW+clI0pVeK9RIdB8svWK6mu44zsAw8BSVZYYKchigbBzTgwJe0vAYFBfR0TPjD1gJl62pSw4g0F14fQ==",
+      "version": "0.18.3",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.18.3.tgz",
+      "integrity": "sha512-Za2U2NsFyun5HXeWnLCICnTFzZp4aC17aSOjgVbQgEWZNMPht51U4paE3SVhPDObkWDjDUYAqVv+mO+ZyMx9Og==",
       "requires": {
         "tslib": "^2.3.1"
       }
diff --git a/web-console/package.json b/web-console/package.json
index 18e99efec43a..e915f8658d5b 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -76,7 +76,7 @@
     "d3-axis": "^2.1.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^2.0.0",
-    "druid-query-toolkit": "^0.18.2",
+    "druid-query-toolkit": "^0.18.3",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",
     "fontsource-open-sans": "^3.0.9",

From fa573942e347e64744442037e01b5a824c4b5c4a Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Tue, 4 Apr 2023 00:21:48 -0700
Subject: [PATCH 04/13] prefer non numeric formats

---
 web-console/src/views/load-data-view/load-data-view.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 35acba45a781..216054f3f121 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -279,7 +279,11 @@ function getTimestampSpec(sampleResponse: SampleResponse | null): TimestampSpec
   );
 
   return (
-    timestampSpecs.find(ts => /time/i.test(ts.column)) || // Use a suggestion that has time in the name if possible
+    // Prefer a suggestion that has "time" in the name and is not a numeric format
+    timestampSpecs.find(
+      ts => /time/i.test(ts.column) && !NUMERIC_TIME_FORMATS.includes(ts.format),
+    ) ||
+    timestampSpecs.find(ts => /time/i.test(ts.column)) || // Otherwise anything that has "time" in the name
     timestampSpecs.find(ts => !NUMERIC_TIME_FORMATS.includes(ts.format)) || // Use a suggestion that is not numeric
     timestampSpecs[0] || // Fall back to the first one
     CONSTANT_TIMESTAMP_SPEC // Ok, empty it is...

From 361abffa04d62f4e8081a7606fb9cc7a5cd1cc6d Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Tue, 4 Apr 2023 12:34:34 -0700
Subject: [PATCH 05/13] fix input format step

---
 .../src/druid-models/time/time.spec.ts        | 30 ++++++++++++++-----
 web-console/src/druid-models/time/time.ts     |  1 +
 .../input-format-step/input-format-step.tsx   |  4 +--
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web-console/src/druid-models/time/time.spec.ts b/web-console/src/druid-models/time/time.spec.ts
index 5670640f7070..72dd79d5f58a 100644
--- a/web-console/src/druid-models/time/time.spec.ts
+++ b/web-console/src/druid-models/time/time.spec.ts
@@ -16,15 +16,31 @@
  * limitations under the License.
  */
 
-import { timeFormatMatches } from './time';
+import { possibleDruidFormatForValues, timeFormatMatches } from './time';
 
-describe('timeFormatMatches', () => {
-  it('works for auto', () => {
-    expect(timeFormatMatches('auto', '2019-05-22 22:42:51+0000')).toBeTruthy();
+describe('time', () => {
+  describe('timeFormatMatches', () => {
+    it('works for auto', () => {
+      expect(timeFormatMatches('auto', '2019-05-22 22:42:51+0000')).toBeTruthy();
+    });
+
+    it('works for iso', () => {
+      expect(timeFormatMatches('iso', '2019-05-22T22:42:51+0000')).toBeTruthy();
+      expect(timeFormatMatches('iso', '2019-05-22 22:42:51+0000')).toBeFalsy();
+    });
   });
 
-  it('works for iso', () => {
-    expect(timeFormatMatches('iso', '2019-05-22T22:42:51+0000')).toBeTruthy();
-    expect(timeFormatMatches('iso', '2019-05-22 22:42:51+0000')).toBeFalsy();
+  describe('possibleDruidFormatForValues', () => {
+    it('works in empty case', () => {
+      expect(possibleDruidFormatForValues([])).toBeUndefined();
+    });
+
+    it('does not react to small numbers', () => {
+      expect(possibleDruidFormatForValues([12, 234, 3432])).toBeUndefined();
+    });
+
+    it('works for auto', () => {
+      expect(possibleDruidFormatForValues(['2019-05-22 22:42:51'])).toEqual('auto');
+    });
   });
 });
diff --git a/web-console/src/druid-models/time/time.ts b/web-console/src/druid-models/time/time.ts
index 829be85520f6..bfd9e88ee282 100644
--- a/web-console/src/druid-models/time/time.ts
+++ b/web-console/src/druid-models/time/time.ts
@@ -86,6 +86,7 @@ export function timeFormatMatches(format: string, value: string | number | bigin
 }
 
 export function possibleDruidFormatForValues(values: any[]): string | undefined {
+  if (!values.length) return;
   return ALL_FORMAT_VALUES.find(format => {
     return values.every(value => timeFormatMatches(format, value));
   });
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
index 7da27679e281..24c65c6f8083 100644
--- a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
@@ -136,7 +136,7 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
     previewSampleResponse && AutoForm.isValidModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS)
       ? {
           inputFormat,
-          signature: getHeaderNamesFromSampleResponse(previewSampleResponse).map(name =>
+          signature: getHeaderNamesFromSampleResponse(previewSampleResponse, true).map(name =>
             SqlColumnDeclaration.create(
               name,
               SqlType.fromNativeType(
@@ -148,7 +148,7 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
               ),
             ),
           ),
-          isArrays: getHeaderNamesFromSampleResponse(previewSampleResponse).map(name =>
+          isArrays: getHeaderNamesFromSampleResponse(previewSampleResponse, true).map(name =>
             guessIsArrayFromSampleResponse(previewSampleResponse, name),
           ),
           timeExpression: selectTimestamp ? possibleTimeExpression?.timeExpression : undefined,

From a371f3bdf10413631c1edc6d700e636130caf1b8 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 5 Apr 2023 09:18:53 -0700
Subject: [PATCH 06/13] boost SQL data loader

---
 .../src/hooks/use-last-defined-deep.ts        | 30 +++++++
 ...e-last-defined.tsx => use-last-defined.ts} |  0
 .../schema-step/schema-step.tsx               | 88 +++++++++++++++----
 .../input-format-step/input-format-step.tsx   |  4 +-
 4 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 web-console/src/hooks/use-last-defined-deep.ts
 rename web-console/src/hooks/{use-last-defined.tsx => use-last-defined.ts} (100%)

diff --git a/web-console/src/hooks/use-last-defined-deep.ts b/web-console/src/hooks/use-last-defined-deep.ts
new file mode 100644
index 000000000000..ee4c24e5c6a0
--- /dev/null
+++ b/web-console/src/hooks/use-last-defined-deep.ts
@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useLastDefinedDeep<T>(cur: T | undefined): T | undefined {
+  const last = useRef<T>();
+
+  useEffect(() => {
+    if (typeof cur === 'undefined' || JSON.stringify(last.current) === JSON.stringify(cur)) return;
+    last.current = cur;
+  }, [cur]);
+
+  return typeof cur === 'undefined' ? last.current : cur;
+}
diff --git a/web-console/src/hooks/use-last-defined.tsx b/web-console/src/hooks/use-last-defined.ts
similarity index 100%
rename from web-console/src/hooks/use-last-defined.tsx
rename to web-console/src/hooks/use-last-defined.ts
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
index 0d6e5dc52bbe..76c536e3a4f9 100644
--- a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
+++ b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
@@ -32,21 +32,29 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { select, selectAll } from 'd3-selection';
-import type { QueryResult } from 'druid-query-toolkit';
-import { C, F, QueryRunner, SqlExpression, SqlQuery } from 'druid-query-toolkit';
+import {
+  C,
+  Column,
+  F,
+  QueryResult,
+  QueryRunner,
+  SqlExpression,
+  SqlQuery,
+  SqlType,
+} from 'druid-query-toolkit';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { ClearableInput, LearnMore, Loader } from '../../../components';
 import { AsyncActionDialog } from '../../../dialogs';
-import type { Execution, IngestQueryPattern } from '../../../druid-models';
+import type { Execution, ExternalConfig, IngestQueryPattern } from '../../../druid-models';
 import {
   changeQueryPatternExpression,
-  externalConfigToTableExpression,
   fitIngestQueryPattern,
   getDestinationMode,
   getQueryPatternExpression,
   getQueryPatternExpressionType,
   ingestQueryPatternToQuery,
+  PLACEHOLDER_TIMESTAMP_SPEC,
   possibleDruidFormatForValues,
   TIME_COLUMN,
   WorkbenchQueryPart,
@@ -57,6 +65,7 @@ import {
   submitTaskQuery,
 } from '../../../helpers';
 import { useLastDefined, usePermanentCallback, useQueryManager } from '../../../hooks';
+import { useLastDefinedDeep } from '../../../hooks/use-last-defined-deep';
 import { getLink } from '../../../links';
 import { AppToaster } from '../../../singletons';
 import type { QueryAction } from '../../../utils';
@@ -64,6 +73,7 @@ import {
   caseInsensitiveContains,
   change,
   dataTypeToIcon,
+  deepSet,
   DruidError,
   filterMap,
   oneOf,
@@ -74,6 +84,7 @@ import {
   wait,
   without,
 } from '../../../utils';
+import { postToSampler } from '../../../utils/sampler';
 import { FlexibleQueryInput } from '../../workbench-view/flexible-query-input/flexible-query-input';
 import { ColumnActions } from '../column-actions/column-actions';
 import { ColumnEditor } from '../column-editor/column-editor';
@@ -375,28 +386,67 @@ export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
     },
   });
 
-  const sampleQueryString = useLastDefined(
+  const sampleExternalConfig = useLastDefinedDeep(
     ingestQueryPattern && mode !== 'sql' // Only sample the data if we are not in the SQL tab live editing the SQL
-      ? SqlQuery.create(
-          externalConfigToTableExpression(ingestQueryPattern.mainExternalConfig),
-        ).toString()
+      ? ingestQueryPattern.mainExternalConfig
       : undefined,
   );
 
-  const [sampleState] = useQueryManager<string, QueryResult, Execution>({
-    query: sampleQueryString,
-    processQuery: async (sampleQueryString, cancelToken) => {
-      return extractResult(
-        await submitTaskQuery({
-          query: sampleQueryString,
-          context: {
-            sqlOuterLimit: 50,
+  const [sampleState] = useQueryManager<ExternalConfig, QueryResult, Execution>({
+    query: sampleExternalConfig,
+    processQuery: async sampleExternalConfig => {
+      const sampleResponse = await postToSampler(
+        {
+          type: 'index_parallel',
+          spec: {
+            ioConfig: {
+              type: 'index_parallel',
+              inputSource: sampleExternalConfig.inputSource,
+              inputFormat: deepSet(sampleExternalConfig.inputFormat, 'keepNullColumns', true),
+            },
+            dataSchema: {
+              dataSource: 'sample',
+              timestampSpec: PLACEHOLDER_TIMESTAMP_SPEC,
+              dimensionsSpec: {
+                dimensions: sampleExternalConfig.signature.map(s => {
+                  const t = s.columnType.getNativeType();
+                  return {
+                    name: s.getColumnName(),
+                    type: t === 'COMPLEX<json>' ? 'json' : t,
+                  };
+                }),
+              },
+              granularitySpec: {
+                rollup: false,
+              },
+            },
           },
-          cancelToken,
-        }),
+          samplerConfig: {
+            numRows: 50,
+            timeoutMs: 15000,
+          },
+        },
+        'sample',
       );
+
+      const columns = filterMap(sampleResponse.logicalSegmentSchema, ({ name, type }) => {
+        if (name === '__time') return;
+        return new Column({
+          name,
+          nativeType: type,
+          sqlType: SqlType.fromNativeType(type).toString(),
+        });
+      });
+
+      return new QueryResult({
+        header: columns,
+        rows: filterMap(sampleResponse.data, r => {
+          const { parsed } = r;
+          if (!parsed) return;
+          return columns.map(({ name }) => parsed[name]);
+        }),
+      });
     },
-    backgroundStatusCheck: executionBackgroundResultStatusCheck,
   });
 
   const sampleDataQuery = useMemo(() => {
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
index 24c65c6f8083..12a2e16e104a 100644
--- a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
@@ -94,7 +94,9 @@ export const InputFormatStep = React.memo(function InputFormatStep(props: InputF
           dataSchema: {
             dataSource: 'sample',
             timestampSpec: PLACEHOLDER_TIMESTAMP_SPEC,
-            dimensionsSpec: {},
+            dimensionsSpec: {
+              useSchemaDiscovery: true,
+            },
             granularitySpec: {
               rollup: false,
             },

From 4318ef2ffa7953c40d27b97c7ae4082983f63945 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 5 Apr 2023 11:39:23 -0700
Subject: [PATCH 07/13] delete dimension in auto discover mode

---
 .../src/druid-models/dimension-spec/dimension-spec.ts       | 6 +++---
 .../src/druid-models/ingestion-spec/ingestion-spec.tsx      | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web-console/src/druid-models/dimension-spec/dimension-spec.ts b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
index 9cb40c8e0c66..2b8e7c02025d 100644
--- a/web-console/src/druid-models/dimension-spec/dimension-spec.ts
+++ b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
@@ -86,13 +86,13 @@ export function getDimensionSpecs(
   hasRollup: boolean,
 ): (string | DimensionSpec)[] {
   return filterMap(getHeaderNamesFromSampleResponse(sampleResponse, true), h => {
-    const type =
+    const dimensionType =
       typeHints[h] ||
       guessColumnTypeFromSampleResponse(sampleResponse, h, guessNumericStringsAsNumbers);
-    if (type === 'string') return h;
+    if (dimensionType === 'string') return h;
     if (hasRollup) return;
     return {
-      type,
+      type: dimensionType === 'COMPLEX<json>' ? 'json' : dimensionType,
       name: h,
     };
   });
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index a13cbfcd49f7..e7f74b0d1908 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -2431,6 +2431,7 @@ export function updateSchemaWithSample(
     newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.useSchemaDiscovery', true);
     newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.includeAllDimensions', true);
     newSpec = deepSet(newSpec, 'spec.dataSchema.dimensionsSpec.dimensionExclusions', []);
+    newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.dimensions');
   } else {
     newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.useSchemaDiscovery');
     newSpec = deepDelete(newSpec, 'spec.dataSchema.dimensionsSpec.includeAllDimensions');

From a45e2732476456ea2ddf062fbbfd1e8a8f2bd68e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Wed, 5 Apr 2023 16:30:35 -0700
Subject: [PATCH 08/13] inline example specs

---
 web-console/src/console-application.tsx       |   7 --
 web-console/src/entry.ts                      |   4 -
 web-console/src/utils/sampler.ts              |  59 ----------
 .../example-picker/example-picker.spec.tsx    |   6 +-
 .../example-picker/example-picker.tsx         |  16 +--
 .../src/views/load-data-view/example-specs.ts | 102 ++++++++++++++++++
 .../views/load-data-view/load-data-view.tsx   |  52 ++-------
 7 files changed, 124 insertions(+), 122 deletions(-)
 create mode 100644 web-console/src/views/load-data-view/example-specs.ts

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 5683a101b54a..2a99044deecb 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -45,7 +45,6 @@ import {
 import './console-application.scss';
 
 export interface ConsoleApplicationProps {
-  exampleManifestsUrl?: string;
   defaultQueryContext?: Record<string, any>;
   mandatoryQueryContext?: Record<string, any>;
 }
@@ -213,15 +212,12 @@ export class ConsoleApplication extends React.PureComponent<
   };
 
   private readonly wrappedDataLoaderView = () => {
-    const { exampleManifestsUrl } = this.props;
-
     return this.wrapInViewContainer(
       'data-loader',
       <LoadDataView
         mode="all"
         initTaskId={this.taskId}
         initSupervisorId={this.supervisorId}
-        exampleManifestsUrl={exampleManifestsUrl}
         goToIngestion={this.goToIngestionWithTaskGroupId}
       />,
       'narrow-pad',
@@ -241,14 +237,11 @@ export class ConsoleApplication extends React.PureComponent<
   };
 
   private readonly wrappedClassicBatchDataLoaderView = () => {
-    const { exampleManifestsUrl } = this.props;
-
     return this.wrapInViewContainer(
       'classic-batch-data-loader',
       <LoadDataView
         mode="batch"
         initTaskId={this.taskId}
-        exampleManifestsUrl={exampleManifestsUrl}
         goToIngestion={this.goToIngestionWithTaskGroupId}
       />,
       'narrow-pad',
diff --git a/web-console/src/entry.ts b/web-console/src/entry.ts
index da267c172c13..7f4aed89129d 100644
--- a/web-console/src/entry.ts
+++ b/web-console/src/entry.ts
@@ -54,9 +54,6 @@ interface ConsoleConfig {
   // A set of custom headers name/value to set on every AJAX request
   customHeaders?: Record<string, string>;
 
-  // The URL for where to load the example manifest, a JSON document that tells the console where to find all the example datasets
-  exampleManifestsUrl?: string;
-
   // The query context to set if the user does not have one saved in local storage, defaults to {}
   defaultQueryContext?: Record<string, any>;
 
@@ -104,7 +101,6 @@ QueryRunner.defaultQueryExecutor = (payload, isSql, cancelToken) => {
 
 ReactDOM.render(
   React.createElement(ConsoleApplication, {
-    exampleManifestsUrl: consoleConfig.exampleManifestsUrl,
     defaultQueryContext: consoleConfig.defaultQueryContext,
     mandatoryQueryContext: consoleConfig.mandatoryQueryContext,
   }),
diff --git a/web-console/src/utils/sampler.ts b/web-console/src/utils/sampler.ts
index 00988f2af5c4..ed5c5e2cc0fd 100644
--- a/web-console/src/utils/sampler.ts
+++ b/web-console/src/utils/sampler.ts
@@ -40,7 +40,6 @@ import {
   PLACEHOLDER_TIMESTAMP_SPEC,
   REINDEX_TIMESTAMP_SPEC,
   TIME_COLUMN,
-  upgradeSpec,
 } from '../druid-models';
 import { Api } from '../singletons';
 
@@ -114,12 +113,6 @@ export interface SampleEntry {
   error?: string;
 }
 
-export interface ExampleManifest {
-  name: string;
-  description: string;
-  spec: any;
-}
-
 export function getCacheRowsFromSampleResponse(sampleResponse: SampleResponse): CacheRows {
   return filterMap(sampleResponse.data, d => d.input).slice(0, 20);
 }
@@ -604,55 +597,3 @@ export async function sampleForSchema(
 
   return postToSampler(applyCache(sampleSpec, cacheRows), 'schema');
 }
-
-export async function sampleForExampleManifests(
-  exampleManifestUrl: string,
-): Promise<ExampleManifest[]> {
-  const exampleSpec: SampleSpec = {
-    type: 'index_parallel',
-    spec: {
-      ioConfig: {
-        type: 'index_parallel',
-        inputSource: { type: 'http', uris: [exampleManifestUrl] },
-        inputFormat: { type: 'tsv', findColumnsFromHeader: true },
-      },
-      dataSchema: {
-        dataSource: 'sample',
-        timestampSpec: {
-          column: 'timestamp',
-          missingValue: '2010-01-01T00:00:00Z',
-        },
-        dimensionsSpec: {},
-      },
-    },
-    samplerConfig: { numRows: 50, timeoutMs: 10000 },
-  };
-
-  const exampleData = await postToSampler(exampleSpec, 'example-manifest');
-
-  return filterMap(exampleData.data, datum => {
-    const parsed = datum.parsed;
-    if (!parsed) return;
-    let { name, description, spec } = parsed;
-    try {
-      spec = JSON.parse(spec);
-    } catch {
-      return;
-    }
-
-    if (
-      typeof name === 'string' &&
-      typeof description === 'string' &&
-      spec &&
-      typeof spec === 'object'
-    ) {
-      return {
-        name: parsed.name,
-        description: parsed.description,
-        spec: upgradeSpec(spec),
-      };
-    } else {
-      return;
-    }
-  });
-}
diff --git a/web-console/src/views/load-data-view/example-picker/example-picker.spec.tsx b/web-console/src/views/load-data-view/example-picker/example-picker.spec.tsx
index 7b98e6952856..e559fc444aa4 100644
--- a/web-console/src/views/load-data-view/example-picker/example-picker.spec.tsx
+++ b/web-console/src/views/load-data-view/example-picker/example-picker.spec.tsx
@@ -25,9 +25,9 @@ describe('ExamplePicker', () => {
   it('matches snapshot', () => {
     const examplePicker = (
       <ExamplePicker
-        exampleManifests={[
-          { name: 'Wikipedia', description: 'stuff stuff', spec: {} },
-          { name: 'Ex 2', description: 'stuff stuff', spec: {} },
+        exampleSpecs={[
+          { name: 'Wikipedia', description: 'stuff stuff', spec: {} as any },
+          { name: 'Ex 2', description: 'stuff stuff', spec: {} as any },
         ]}
         onSelectExample={() => {}}
       />
diff --git a/web-console/src/views/load-data-view/example-picker/example-picker.tsx b/web-console/src/views/load-data-view/example-picker/example-picker.tsx
index cf5c9bbe2605..a09043e0f16d 100644
--- a/web-console/src/views/load-data-view/example-picker/example-picker.tsx
+++ b/web-console/src/views/load-data-view/example-picker/example-picker.tsx
@@ -20,15 +20,15 @@ import { Button, Callout, FormGroup, HTMLSelect, Intent } from '@blueprintjs/cor
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
-import type { ExampleManifest } from '../../../utils/sampler';
+import type { ExampleSpec } from '../example-specs';
 
 export interface ExamplePickerProps {
-  exampleManifests: ExampleManifest[];
-  onSelectExample: (exampleManifest: ExampleManifest) => void;
+  exampleSpecs: ExampleSpec[];
+  onSelectExample(exampleSpec: ExampleSpec): void;
 }
 
 export const ExamplePicker = React.memo(function ExamplePicker(props: ExamplePickerProps) {
-  const { exampleManifests, onSelectExample } = props;
+  const { exampleSpecs, onSelectExample } = props;
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   return (
@@ -39,15 +39,15 @@ export const ExamplePicker = React.memo(function ExamplePicker(props: ExamplePic
           value={selectedIndex}
           onChange={e => setSelectedIndex(e.target.value as any)}
         >
-          {exampleManifests.map((exampleManifest, i) => (
+          {exampleSpecs.map((exampleSpec, i) => (
             <option key={i} value={i}>
-              {exampleManifest.name}
+              {exampleSpec.name}
             </option>
           ))}
         </HTMLSelect>
       </FormGroup>
       <FormGroup>
-        <Callout>{exampleManifests[selectedIndex].description}</Callout>
+        <Callout>{exampleSpecs[selectedIndex].description}</Callout>
       </FormGroup>
       <FormGroup>
         <Button
@@ -55,7 +55,7 @@ export const ExamplePicker = React.memo(function ExamplePicker(props: ExamplePic
           rightIcon={IconNames.ARROW_RIGHT}
           intent={Intent.PRIMARY}
           onClick={() => {
-            onSelectExample(exampleManifests[selectedIndex]);
+            onSelectExample(exampleSpecs[selectedIndex]);
           }}
         />
       </FormGroup>
diff --git a/web-console/src/views/load-data-view/example-specs.ts b/web-console/src/views/load-data-view/example-specs.ts
new file mode 100644
index 000000000000..dd1a89fa4749
--- /dev/null
+++ b/web-console/src/views/load-data-view/example-specs.ts
@@ -0,0 +1,102 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ExampleSpec {
+  name: string;
+  description: string;
+  spec: any;
+}
+
+export const EXAMPLE_SPECS: ExampleSpec[] = [
+  {
+    name: 'Wikipedia Edits',
+    description: 'Edits on Wikipedia from one day',
+    spec: {
+      type: 'index_parallel',
+      spec: {
+        ioConfig: {
+          type: 'index_parallel',
+          inputSource: {
+            type: 'http',
+            uris: ['https://druid.apache.org/data/wikipedia.json.gz'],
+          },
+        },
+        dataSchema: {
+          granularitySpec: {
+            segmentGranularity: 'day',
+          },
+        },
+        tuningConfig: {
+          type: 'index_parallel',
+        },
+      },
+    },
+  },
+  {
+    name: 'KoalasToTheMax one day',
+    description: 'One day of flat events from KoalasToTheMax.com (JSON)',
+    spec: {
+      type: 'index_parallel',
+      spec: {
+        ioConfig: {
+          type: 'index_parallel',
+          inputSource: {
+            type: 'http',
+            uris: ['https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz'],
+          },
+        },
+        dataSchema: {
+          dataSource: 'kttm1',
+          granularitySpec: {
+            segmentGranularity: 'day',
+          },
+        },
+        tuningConfig: {
+          type: 'index_parallel',
+        },
+      },
+    },
+  },
+  {
+    name: 'KoalasToTheMax one day (nested)',
+    description: 'One day of nested events from KoalasToTheMax.com (JSON)',
+    spec: {
+      type: 'index_parallel',
+      spec: {
+        ioConfig: {
+          type: 'index_parallel',
+          inputSource: {
+            type: 'http',
+            uris: [
+              'https://static.imply.io/example-data/kttm-nested-v2/kttm-nested-v2-2019-08-25.json.gz',
+            ],
+          },
+        },
+        dataSchema: {
+          dataSource: 'kttm_nested1',
+          granularitySpec: {
+            segmentGranularity: 'day',
+          },
+        },
+        tuningConfig: {
+          type: 'index_parallel',
+        },
+      },
+    },
+  },
+];
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 216054f3f121..3bf6a4e949e6 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -150,7 +150,6 @@ import {
 } from '../../utils';
 import type {
   CacheRows,
-  ExampleManifest,
   SampleEntry,
   SampleResponse,
   SampleResponseWithExtraInfo,
@@ -162,7 +161,6 @@ import {
   getProxyOverlordModules,
   guessDimensionsFromSampleResponse,
   sampleForConnect,
-  sampleForExampleManifests,
   sampleForFilter,
   sampleForParser,
   sampleForSchema,
@@ -171,6 +169,7 @@ import {
 } from '../../utils/sampler';
 
 import { ExamplePicker } from './example-picker/example-picker';
+import { EXAMPLE_SPECS } from './example-specs';
 import { FilterTable, filterTableSelectedColumnName } from './filter-table/filter-table';
 import { FormEditor } from './form-editor/form-editor';
 import {
@@ -350,7 +349,6 @@ export interface LoadDataViewProps {
   mode: LoadDataViewMode;
   initSupervisorId?: string;
   initTaskId?: string;
-  exampleManifestsUrl?: string;
   goToIngestion: (taskGroupId: string | undefined, openDialog?: string) => void;
 }
 
@@ -373,7 +371,6 @@ export interface LoadDataViewState {
   // welcome
   overlordModules?: string[];
   selectedComboType?: IngestionComboTypeWithExtra;
-  exampleManifests?: ExampleManifest[];
 
   // general
   sampleStrategy: SampleStrategy;
@@ -645,9 +642,6 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     const { step } = this.state;
 
     switch (step) {
-      case 'welcome':
-        return this.queryForWelcome();
-
       case 'connect':
         return this.queryForConnect(initRun);
 
@@ -667,6 +661,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         return this.queryForSchema(initRun);
 
       case 'loading':
+      case 'welcome':
       case 'partition':
       case 'publish':
       case 'tuning':
@@ -806,25 +801,6 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
   // ==================================================================
 
-  async queryForWelcome() {
-    const { exampleManifestsUrl } = this.props;
-    if (!exampleManifestsUrl) return;
-
-    let exampleManifests: ExampleManifest[] | undefined;
-    try {
-      exampleManifests = await sampleForExampleManifests(exampleManifestsUrl);
-    } catch (e) {
-      this.setState({
-        exampleManifests: undefined,
-      });
-      return;
-    }
-
-    this.setState({
-      exampleManifests,
-    });
-  }
-
   renderIngestionCard(
     comboType: IngestionComboTypeWithExtra,
     disabled?: boolean,
@@ -863,9 +839,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   }
 
   renderWelcomeStep() {
-    const { mode, exampleManifestsUrl } = this.props;
-    const { spec, exampleManifests } = this.state;
-    const noExamples = Boolean(!exampleManifests || !exampleManifests.length);
+    const { mode } = this.props;
+    const { spec } = this.state;
 
     const welcomeMessage = this.renderWelcomeStepMessage();
     return (
@@ -889,7 +864,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 {this.renderIngestionCard('index_parallel:http')}
                 {this.renderIngestionCard('index_parallel:local')}
                 {this.renderIngestionCard('index_parallel:inline')}
-                {exampleManifestsUrl && this.renderIngestionCard('example', noExamples)}
+                {this.renderIngestionCard('example')}
               </>
             )}
             {this.renderIngestionCard('other')}
@@ -911,7 +886,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   }
 
   renderWelcomeStepMessage(): JSX.Element | undefined {
-    const { selectedComboType, exampleManifests } = this.state;
+    const { selectedComboType } = this.state;
 
     if (!selectedComboType) {
       return <p>Please specify where your raw data is located.</p>;
@@ -1001,11 +976,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         );
 
       case 'example':
-        if (exampleManifests && exampleManifests.length) {
-          return; // Yield to example picker controls
-        } else {
-          return <p>Could not load examples.</p>;
-        }
+        return; // Yield to example picker controls
 
       case 'other':
         return (
@@ -1025,7 +996,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
   renderWelcomeStepControls(): JSX.Element | undefined {
     const { goToIngestion } = this.props;
-    const { spec, selectedComboType, exampleManifests } = this.state;
+    const { spec, selectedComboType } = this.state;
 
     const issue = this.selectedIngestionTypeIssue();
     if (issue) return;
@@ -1095,12 +1066,11 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         );
 
       case 'example':
-        if (!exampleManifests) return;
         return (
           <ExamplePicker
-            exampleManifests={exampleManifests}
-            onSelectExample={exampleManifest => {
-              this.updateSpec(exampleManifest.spec);
+            exampleSpecs={EXAMPLE_SPECS}
+            onSelectExample={exampleSpec => {
+              this.updateSpec(exampleSpec.spec);
               this.updateStep('connect');
             }}
           />

From 08d69850def066ace118ea238b2fbbaf84d08398 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Apr 2023 08:12:59 -0700
Subject: [PATCH 09/13] feedback updates

---
 web-console/script/create-sql-docs.js         |   2 +-
 .../ingestion-spec/ingestion-spec.spec.ts     | 294 +++++++++---------
 web-console/src/utils/sampler.mock.ts         |  26 +-
 3 files changed, 169 insertions(+), 153 deletions(-)

diff --git a/web-console/script/create-sql-docs.js b/web-console/script/create-sql-docs.js
index 91dfceffad4c..561db7e2cc46 100755
--- a/web-console/script/create-sql-docs.js
+++ b/web-console/script/create-sql-docs.js
@@ -23,7 +23,7 @@ const snarkdown = require('snarkdown');
 
 const writefile = 'lib/sql-docs.js';
 
-const MINIMUM_EXPECTED_NUMBER_OF_FUNCTIONS = 164;
+const MINIMUM_EXPECTED_NUMBER_OF_FUNCTIONS = 167;
 const MINIMUM_EXPECTED_NUMBER_OF_DATA_TYPES = 14;
 
 const initialFunctionDocs = {
diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
index 3336c1199d35..03a7cd1d26d1 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
@@ -16,14 +16,16 @@
  * limitations under the License.
  */
 
-import { CSV_SAMPLE } from '../../utils/sampler.mock';
+import { CSV_SAMPLE, JSON_SAMPLE } from '../../utils/sampler.mock';
 
+import type { IngestionSpec } from './ingestion-spec';
 import {
   adjustId,
   cleanSpec,
   guessColumnTypeFromInput,
   guessColumnTypeFromSampleResponse,
   guessSimpleInputFormat,
+  updateSchemaWithSample,
   upgradeSpec,
 } from './ingestion-spec';
 
@@ -670,36 +672,36 @@ describe('ingestion-spec', () => {
 });
 
 describe('spec utils', () => {
-  // const ingestionSpec: IngestionSpec = {
-  //   type: 'index_parallel',
-  //   spec: {
-  //     ioConfig: {
-  //       type: 'index_parallel',
-  //       inputSource: {
-  //         type: 'http',
-  //         uris: ['https://website.com/wikipedia.json.gz'],
-  //       },
-  //       inputFormat: {
-  //         type: 'json',
-  //       },
-  //     },
-  //     tuningConfig: {
-  //       type: 'index_parallel',
-  //     },
-  //     dataSchema: {
-  //       dataSource: 'wikipedia',
-  //       granularitySpec: {
-  //         segmentGranularity: 'day',
-  //         queryGranularity: 'hour',
-  //       },
-  //       timestampSpec: {
-  //         column: 'timestamp',
-  //         format: 'iso',
-  //       },
-  //       dimensionsSpec: {},
-  //     },
-  //   },
-  // };
+  const ingestionSpec: IngestionSpec = {
+    type: 'index_parallel',
+    spec: {
+      ioConfig: {
+        type: 'index_parallel',
+        inputSource: {
+          type: 'http',
+          uris: ['https://website.com/wikipedia.json.gz'],
+        },
+        inputFormat: {
+          type: 'json',
+        },
+      },
+      tuningConfig: {
+        type: 'index_parallel',
+      },
+      dataSchema: {
+        dataSource: 'wikipedia',
+        granularitySpec: {
+          segmentGranularity: 'day',
+          queryGranularity: 'hour',
+        },
+        timestampSpec: {
+          column: 'timestamp',
+          format: 'iso',
+        },
+        dimensionsSpec: {},
+      },
+    },
+  };
 
   describe('guessColumnTypeFromInput', () => {
     it('works for empty', () => {
@@ -754,114 +756,128 @@ describe('spec utils', () => {
     });
   });
 
-  // it('updateSchemaWithSample', () => {
-  //   const withRollup = updateSchemaWithSample(
-  //     ingestionSpec,
-  //     { header: ['header'], rows: [] },
-  //     'specific',
-  //     true,
-  //   );
-  //
-  //   expect(withRollup).toMatchInlineSnapshot(`
-  //     Object {
-  //       "spec": Object {
-  //         "dataSchema": Object {
-  //           "dataSource": "wikipedia",
-  //           "dimensionsSpec": Object {
-  //             "dimensions": Array [
-  //               "header",
-  //             ],
-  //           },
-  //           "granularitySpec": Object {
-  //             "queryGranularity": "hour",
-  //             "rollup": true,
-  //             "segmentGranularity": "day",
-  //           },
-  //           "metricsSpec": Array [
-  //             Object {
-  //               "name": "count",
-  //               "type": "count",
-  //             },
-  //           ],
-  //           "timestampSpec": Object {
-  //             "column": "timestamp",
-  //             "format": "iso",
-  //           },
-  //         },
-  //         "ioConfig": Object {
-  //           "inputFormat": Object {
-  //             "type": "json",
-  //           },
-  //           "inputSource": Object {
-  //             "type": "http",
-  //             "uris": Array [
-  //               "https://website.com/wikipedia.json.gz",
-  //             ],
-  //           },
-  //           "type": "index_parallel",
-  //         },
-  //         "tuningConfig": Object {
-  //           "forceGuaranteedRollup": true,
-  //           "partitionsSpec": Object {
-  //             "type": "hashed",
-  //           },
-  //           "type": "index_parallel",
-  //         },
-  //       },
-  //       "type": "index_parallel",
-  //     }
-  //   `);
-  //
-  //   const noRollup = updateSchemaWithSample(
-  //     ingestionSpec,
-  //     { header: ['header'], rows: [] },
-  //     'specific',
-  //     false,
-  //   );
-  //
-  //   expect(noRollup).toMatchInlineSnapshot(`
-  //     Object {
-  //       "spec": Object {
-  //         "dataSchema": Object {
-  //           "dataSource": "wikipedia",
-  //           "dimensionsSpec": Object {
-  //             "dimensions": Array [
-  //               "header",
-  //             ],
-  //           },
-  //           "granularitySpec": Object {
-  //             "queryGranularity": "none",
-  //             "rollup": false,
-  //             "segmentGranularity": "day",
-  //           },
-  //           "timestampSpec": Object {
-  //             "column": "timestamp",
-  //             "format": "iso",
-  //           },
-  //         },
-  //         "ioConfig": Object {
-  //           "inputFormat": Object {
-  //             "type": "json",
-  //           },
-  //           "inputSource": Object {
-  //             "type": "http",
-  //             "uris": Array [
-  //               "https://website.com/wikipedia.json.gz",
-  //             ],
-  //           },
-  //           "type": "index_parallel",
-  //         },
-  //         "tuningConfig": Object {
-  //           "partitionsSpec": Object {
-  //             "type": "dynamic",
-  //           },
-  //           "type": "index_parallel",
-  //         },
-  //       },
-  //       "type": "index_parallel",
-  //     }
-  //   `);
-  // });
+  it('updateSchemaWithSample', () => {
+    const withRollup = updateSchemaWithSample(ingestionSpec, JSON_SAMPLE, 'specific', true);
+
+    expect(withRollup).toMatchInlineSnapshot(`
+      Object {
+        "spec": Object {
+          "dataSchema": Object {
+            "dataSource": "wikipedia",
+            "dimensionsSpec": Object {
+              "dimensions": Array [
+                "user",
+                "id",
+                "tags",
+                "nums",
+              ],
+            },
+            "granularitySpec": Object {
+              "queryGranularity": "hour",
+              "rollup": true,
+              "segmentGranularity": "day",
+            },
+            "metricsSpec": Array [
+              Object {
+                "name": "count",
+                "type": "count",
+              },
+              Object {
+                "fieldName": "followers",
+                "name": "sum_followers",
+                "type": "longSum",
+              },
+              Object {
+                "fieldName": "spend",
+                "name": "sum_spend",
+                "type": "doubleSum",
+              },
+            ],
+            "timestampSpec": Object {
+              "column": "timestamp",
+              "format": "iso",
+            },
+          },
+          "ioConfig": Object {
+            "inputFormat": Object {
+              "type": "json",
+            },
+            "inputSource": Object {
+              "type": "http",
+              "uris": Array [
+                "https://website.com/wikipedia.json.gz",
+              ],
+            },
+            "type": "index_parallel",
+          },
+          "tuningConfig": Object {
+            "forceGuaranteedRollup": true,
+            "partitionsSpec": Object {
+              "type": "hashed",
+            },
+            "type": "index_parallel",
+          },
+        },
+        "type": "index_parallel",
+      }
+    `);
+
+    const noRollup = updateSchemaWithSample(ingestionSpec, JSON_SAMPLE, 'specific', false);
+
+    expect(noRollup).toMatchInlineSnapshot(`
+      Object {
+        "spec": Object {
+          "dataSchema": Object {
+            "dataSource": "wikipedia",
+            "dimensionsSpec": Object {
+              "dimensions": Array [
+                "user",
+                Object {
+                  "name": "followers",
+                  "type": "long",
+                },
+                Object {
+                  "name": "spend",
+                  "type": "double",
+                },
+                "id",
+                "tags",
+                "nums",
+              ],
+            },
+            "granularitySpec": Object {
+              "queryGranularity": "none",
+              "rollup": false,
+              "segmentGranularity": "day",
+            },
+            "timestampSpec": Object {
+              "column": "timestamp",
+              "format": "iso",
+            },
+          },
+          "ioConfig": Object {
+            "inputFormat": Object {
+              "type": "json",
+            },
+            "inputSource": Object {
+              "type": "http",
+              "uris": Array [
+                "https://website.com/wikipedia.json.gz",
+              ],
+            },
+            "type": "index_parallel",
+          },
+          "tuningConfig": Object {
+            "partitionsSpec": Object {
+              "type": "dynamic",
+            },
+            "type": "index_parallel",
+          },
+        },
+        "type": "index_parallel",
+      }
+    `);
+  });
 
   it('adjustId', () => {
     expect(adjustId('')).toEqual('');
diff --git a/web-console/src/utils/sampler.mock.ts b/web-console/src/utils/sampler.mock.ts
index 3cae4370f969..618c4fb835fc 100644
--- a/web-console/src/utils/sampler.mock.ts
+++ b/web-console/src/utils/sampler.mock.ts
@@ -31,7 +31,7 @@ export const EMPTY_SAMPLE: SampleResponse = {
 };
 
 /*
-This data is the returned sample when ingested with:
+This data is the returned sample when sampling (from the timestamp stage):
 
 {"timestamp":"2016-04-11T09:20:00Z","user":"Alice","followers":10,"spend":0,"id":"12232323","tags":null,"nums":[4]}
 {"timestamp":"2016-04-11T09:21:00Z","user":"Bob","followers":0,"spend":3,"id":"45345634","tags":["a"],"nums":[5,6]}
@@ -55,17 +55,17 @@ export const JSON_SAMPLE: SampleResponse = {
     { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
   ],
   physicalDimensions: [
-    { type: 'json', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
     {
-      type: 'json',
+      type: 'auto',
       name: 'followers',
       multiValueHandling: 'SORTED_ARRAY',
       createBitmapIndex: true,
     },
-    { type: 'json', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
   ],
   logicalSegmentSchema: [
     { name: '__time', type: 'LONG' },
@@ -178,17 +178,17 @@ export const CSV_SAMPLE: SampleResponse = {
     { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
   ],
   physicalDimensions: [
-    { type: 'json', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'user', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
     {
-      type: 'json',
+      type: 'auto',
       name: 'followers',
       multiValueHandling: 'SORTED_ARRAY',
       createBitmapIndex: true,
     },
-    { type: 'json', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
-    { type: 'json', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'spend', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'id', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'tags', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
+    { type: 'auto', name: 'nums', multiValueHandling: 'SORTED_ARRAY', createBitmapIndex: true },
   ],
   logicalSegmentSchema: [
     { name: '__time', type: 'LONG' },

From 2ec03c15969f3225dd3d455036f78b04569797d9 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Apr 2023 10:38:43 -0700
Subject: [PATCH 10/13] yeet the format into valueFormat when switching to
 kafka

---
 web-console/src/components/auto-form/auto-form.tsx         | 4 ++--
 web-console/src/druid-models/input-format/input-format.tsx | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
index 5c2a229a4f00..a1e19174ffcd 100644
--- a/web-console/src/components/auto-form/auto-form.tsx
+++ b/web-console/src/components/auto-form/auto-form.tsx
@@ -70,7 +70,7 @@ export interface Field<M> {
   hide?: Functor<M, boolean>;
   hideInMore?: Functor<M, boolean>;
   valueAdjustment?: (value: any) => any;
-  adjustment?: (model: Partial<M>) => Partial<M>;
+  adjustment?: (model: Partial<M>, oldModel: Partial<M>) => Partial<M>;
   issueWithValue?: (value: any) => string | undefined;
 
   customSummary?: (v: any) => string;
@@ -217,7 +217,7 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     }
 
     if (field.adjustment) {
-      newModel = field.adjustment(newModel);
+      newModel = field.adjustment(newModel, model);
     }
 
     this.modelChange(newModel);
diff --git a/web-console/src/druid-models/input-format/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
index 317ed33c804b..cdaa95cf17b5 100644
--- a/web-console/src/druid-models/input-format/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -79,6 +79,12 @@ function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefine
           </p>
         </>
       ),
+      adjustment: (model, oldModel) => {
+        if (model.type === 'kafka' && oldModel.type !== 'kafka') {
+          return deepSet(model, 'valueFormat', oldModel);
+        }
+        return model;
+      },
     },
     {
       name: 'featureSpec',

From 679263892cf8f2169f57ffd76e638da38affc124 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Apr 2023 14:05:32 -0700
Subject: [PATCH 11/13] kafka format is now a toggle

---
 .../ingestion-spec/ingestion-spec.tsx         |   2 +
 .../input-format/input-format.tsx             | 929 +++++++++---------
 .../views/load-data-view/info-messages.tsx    |  31 +-
 .../views/load-data-view/load-data-view.tsx   |  34 +-
 4 files changed, 483 insertions(+), 513 deletions(-)

diff --git a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index e7f74b0d1908..de3e39e3fde2 100644
--- a/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -897,6 +897,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           label: 'Bootstrap servers',
           type: 'string',
           required: true,
+          placeholder: 'kafka_broker_host:9092',
           info: (
             <>
               <ExternalLink
@@ -918,6 +919,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           type: 'string',
           required: true,
           defined: typeIs('kafka'),
+          placeholder: 'topic_name',
         },
         {
           name: 'consumerProperties',
diff --git a/web-console/src/druid-models/input-format/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
index cdaa95cf17b5..f92a1844c667 100644
--- a/web-console/src/druid-models/input-format/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -49,23 +49,13 @@ export interface InputFormat {
   readonly valueFormat?: InputFormat;
 }
 
-function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefined) {
-  const fields = compact([
+function generateInputFormatFields(streaming: boolean) {
+  return compact([
     {
       name: 'type',
       label: 'Input format',
       type: 'string',
-      suggestions: compact([
-        streamingType === 'kafka' ? 'kafka' : undefined,
-        'json',
-        'csv',
-        'tsv',
-        'parquet',
-        'orc',
-        'avro_ocf',
-        'avro_stream',
-        'regex',
-      ]),
+      suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
       required: true,
       info: (
         <>
@@ -79,12 +69,6 @@ function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefine
           </p>
         </>
       ),
-      adjustment: (model, oldModel) => {
-        if (model.type === 'kafka' && oldModel.type !== 'kafka') {
-          return deepSet(model, 'valueFormat', oldModel);
-        }
-        return model;
-      },
     },
     {
       name: 'featureSpec',
@@ -107,7 +91,7 @@ function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefine
         </>
       ),
     },
-    streamingType
+    streaming
       ? {
           name: 'assumeNewlineDelimited',
           type: 'boolean',
@@ -136,7 +120,7 @@ function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefine
           ),
         }
       : undefined,
-    streamingType
+    streaming
       ? {
           name: 'useJsonNodeReader',
           label: 'Use JSON node reader',
@@ -246,477 +230,456 @@ function generateInputFormatFields(streamingType: 'kafka' | 'kinesis' | undefine
       ),
     },
   ] as (Field<InputFormat> | undefined)[]);
+}
 
-  if (streamingType === 'kafka') {
-    fields.push(
-      {
-        name: 'timestampColumnName',
-        label: 'Kafka timestamp column name',
-        type: 'string',
-        defaultValue: 'kafka.timestamp',
-        defined: typeIs('kafka'),
-        info: `Name of the column for the kafka record's timestamp.`,
-      },
-
-      // -----------------------------------------------------
-      // valueFormat fields
-
-      {
-        name: 'valueFormat.type',
-        label: 'Kafka payload input format',
-        type: 'string',
-        suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
-        required: true,
-        defined: typeIs('kafka'),
-        info: (
-          <>
-            <p>The parser used to parse the payload of the Kafka message.</p>
-            <p>
-              For more information see{' '}
-              <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
-                the documentation
-              </ExternalLink>
-              .
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.featureSpec',
-        label: 'Kafka payload JSON parser features',
-        type: 'json',
-        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-        info: (
-          <>
-            <p>
-              <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
-                JSON parser features
-              </ExternalLink>{' '}
-              supported by Jackson library. Those features will be applied when parsing the input
-              JSON data.
-            </p>
-            <p>
-              Example:{' '}
-              <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.assumeNewlineDelimited',
-        label: 'Kafka payload assume newline delimited',
-        type: 'boolean',
-        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-        disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
-        defaultValue: false,
-        info: (
-          <>
-            <p>
-              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
-              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
-              events that are present in the same streaming record will be discarded.
-            </p>
-            <p>
-              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
-              can be <Code>true</Code>) affect only how parsing exceptions are handled.
-            </p>
-            <p>
-              If the input is known to be newline delimited JSON (each individual JSON event is
-              contained in a single line, separated by newlines), setting this option to true allows
-              for more flexible parsing exception handling. Only the lines with invalid JSON syntax
-              will be discarded, while lines containing valid JSON events will still be ingested.
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.useJsonNodeReader',
-        label: 'Kafka payload use JSON node reader',
-        type: 'boolean',
-        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-        disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
-        defaultValue: false,
-        info: (
-          <>
-            {' '}
-            <p>
-              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
-              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
-              events that are present in the same streaming record will be discarded.
-            </p>
-            <p>
-              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
-              can be <Code>true</Code>) affect only how parsing exceptions are handled.
-            </p>
-            <p>
-              When ingesting multi-line JSON events, enabling this option will enable the use of a
-              JSON parser which will retain any valid JSON events encountered within a streaming
-              record prior to when a parsing exception occurred.
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.delimiter',
-        label: 'Kafka payload delimiter',
-        type: 'string',
-        defaultValue: '\t',
-        suggestions: ['\t', ';', '|', '#'],
-        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'tsv',
-        info: <>A custom delimiter for data values.</>,
-      },
-      {
-        name: 'valueFormat.pattern',
-        label: 'Kafka payload pattern',
-        type: 'string',
-        defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'regex',
-        required: true,
-      },
-      {
-        name: 'valueFormat.skipHeaderRows',
-        label: 'Kafka payload skip header rows',
-        type: 'number',
-        defaultValue: 0,
-        defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
-        min: 0,
-        info: (
-          <>
-            If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.findColumnsFromHeader',
-        label: 'Kafka payload find columns from header',
-        type: 'boolean',
-        defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
-        required: true,
-        info: (
-          <>
-            If this is set, find the column names from the header row. Note that
-            <Code>skipHeaderRows</Code> will be applied before finding column names from the header.
-            For example, if you set <Code>skipHeaderRows</Code> to 2 and{' '}
-            <Code>findColumnsFromHeader</Code> to true, the task will skip the first two lines and
-            then extract column information from the third line.
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.columns',
-        label: 'Kafka payload columns',
-        type: 'string-array',
-        required: true,
-        defined: inputFormat =>
-          (oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv') &&
-            deepGet(inputFormat, 'valueFormat.findColumnsFromHeader') === false) ||
-          deepGet(inputFormat, 'valueFormat.type') === 'regex',
-        info: (
-          <>
-            Specifies the columns of the data. The columns should be in the same order with the
-            columns of your data.
-          </>
-        ),
-      },
-      {
-        name: 'valueFormat.listDelimiter',
-        label: 'Kafka payload list delimiter',
-        type: 'string',
-        defaultValue: '\x01',
-        suggestions: ['\x01', '\x00'],
-        defined: inputFormat =>
-          oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv', 'regex'),
-        info: <>A custom delimiter for multi-value dimensions.</>,
-      },
-      {
-        name: 'valueFormat.binaryAsString',
-        label: 'Kafka payload list binary as string',
-        type: 'boolean',
-        defaultValue: false,
-        defined: inputFormat =>
-          oneOf(
-            deepGet(inputFormat, 'valueFormat.type'),
-            'parquet',
-            'orc',
-            'avro_ocf',
-            'avro_stream',
-          ),
-        info: (
-          <>
-            Specifies if the binary column which is not logically marked as a string should be
-            treated as a UTF-8 encoded string.
-          </>
-        ),
-      },
+export const BATCH_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(false);
+export const STREAMING_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(true);
+export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
+  {
+    name: 'timestampColumnName',
+    label: 'Kafka timestamp column name',
+    type: 'string',
+    defaultValue: 'kafka.timestamp',
+    defined: typeIs('kafka'),
+    info: `Name of the column for the kafka record's timestamp.`,
+  },
 
-      // -----------------------------------------------------
-      // keyFormat fields
+  // -----------------------------------------------------
+  // valueFormat fields
 
-      {
-        name: 'keyFormat.type',
-        label: 'Kafka key input format',
-        type: 'string',
-        suggestions: [
-          undefined,
-          'json',
-          'csv',
-          'tsv',
-          'parquet',
-          'orc',
-          'avro_ocf',
-          'avro_stream',
-          'regex',
-        ],
-        placeholder: `(don't parse Kafka key)`,
-        defined: typeIs('kafka'),
-        info: (
-          <>
-            <p>The parser used to parse the key of the Kafka message.</p>
-            <p>
-              For more information see{' '}
-              <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
-                the documentation
-              </ExternalLink>
-              .
-            </p>
-          </>
-        ),
-        adjustment: inputFormat => {
-          const keyFormatType = deepGet(inputFormat, 'keyFormat.type');
-          // If the user selects one of these formats then populate the columns (that are in any case meaningless in this context)
-          // with an initial value.
-          switch (keyFormatType) {
-            case 'regex':
-              inputFormat = deepSet(inputFormat, 'keyFormat.pattern', '([\\s\\S]*)');
-              inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
-              break;
+  {
+    name: 'valueFormat.type',
+    label: 'Kafka payload input format',
+    type: 'string',
+    suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
+    required: true,
+    defined: typeIs('kafka'),
+    info: (
+      <>
+        <p>The parser used to parse the payload of the Kafka message.</p>
+        <p>
+          For more information see{' '}
+          <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
+            the documentation
+          </ExternalLink>
+          .
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.featureSpec',
+    label: 'Kafka payload JSON parser features',
+    type: 'json',
+    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+    info: (
+      <>
+        <p>
+          <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
+            JSON parser features
+          </ExternalLink>{' '}
+          supported by Jackson library. Those features will be applied when parsing the input JSON
+          data.
+        </p>
+        <p>
+          Example:{' '}
+          <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.assumeNewlineDelimited',
+    label: 'Kafka payload assume newline delimited',
+    type: 'boolean',
+    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+    disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
+    defaultValue: false,
+    info: (
+      <>
+        <p>
+          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
+          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
+          are present in the same streaming record will be discarded.
+        </p>
+        <p>
+          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
+          <Code>true</Code>) affect only how parsing exceptions are handled.
+        </p>
+        <p>
+          If the input is known to be newline delimited JSON (each individual JSON event is
+          contained in a single line, separated by newlines), setting this option to true allows for
+          more flexible parsing exception handling. Only the lines with invalid JSON syntax will be
+          discarded, while lines containing valid JSON events will still be ingested.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.useJsonNodeReader',
+    label: 'Kafka payload use JSON node reader',
+    type: 'boolean',
+    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
+    disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
+    defaultValue: false,
+    info: (
+      <>
+        {' '}
+        <p>
+          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
+          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
+          are present in the same streaming record will be discarded.
+        </p>
+        <p>
+          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
+          <Code>true</Code>) affect only how parsing exceptions are handled.
+        </p>
+        <p>
+          When ingesting multi-line JSON events, enabling this option will enable the use of a JSON
+          parser which will retain any valid JSON events encountered within a streaming record prior
+          to when a parsing exception occurred.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.delimiter',
+    label: 'Kafka payload delimiter',
+    type: 'string',
+    defaultValue: '\t',
+    suggestions: ['\t', ';', '|', '#'],
+    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'tsv',
+    info: <>A custom delimiter for data values.</>,
+  },
+  {
+    name: 'valueFormat.pattern',
+    label: 'Kafka payload pattern',
+    type: 'string',
+    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'regex',
+    required: true,
+  },
+  {
+    name: 'valueFormat.skipHeaderRows',
+    label: 'Kafka payload skip header rows',
+    type: 'number',
+    defaultValue: 0,
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
+    min: 0,
+    info: (
+      <>
+        If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.findColumnsFromHeader',
+    label: 'Kafka payload find columns from header',
+    type: 'boolean',
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
+    required: true,
+    info: (
+      <>
+        If this is set, find the column names from the header row. Note that
+        <Code>skipHeaderRows</Code> will be applied before finding column names from the header. For
+        example, if you set <Code>skipHeaderRows</Code> to 2 and <Code>findColumnsFromHeader</Code>{' '}
+        to true, the task will skip the first two lines and then extract column information from the
+        third line.
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.columns',
+    label: 'Kafka payload columns',
+    type: 'string-array',
+    required: true,
+    defined: inputFormat =>
+      (oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv') &&
+        deepGet(inputFormat, 'valueFormat.findColumnsFromHeader') === false) ||
+      deepGet(inputFormat, 'valueFormat.type') === 'regex',
+    info: (
+      <>
+        Specifies the columns of the data. The columns should be in the same order with the columns
+        of your data.
+      </>
+    ),
+  },
+  {
+    name: 'valueFormat.listDelimiter',
+    label: 'Kafka payload list delimiter',
+    type: 'string',
+    defaultValue: '\x01',
+    suggestions: ['\x01', '\x00'],
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv', 'regex'),
+    info: <>A custom delimiter for multi-value dimensions.</>,
+  },
+  {
+    name: 'valueFormat.binaryAsString',
+    label: 'Kafka payload list binary as string',
+    type: 'boolean',
+    defaultValue: false,
+    defined: inputFormat =>
+      oneOf(deepGet(inputFormat, 'valueFormat.type'), 'parquet', 'orc', 'avro_ocf', 'avro_stream'),
+    info: (
+      <>
+        Specifies if the binary column which is not logically marked as a string should be treated
+        as a UTF-8 encoded string.
+      </>
+    ),
+  },
 
-            case 'csv':
-            case 'tsv':
-              inputFormat = deepSet(inputFormat, 'keyFormat.findColumnsFromHeader', false);
-              inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
-              break;
-          }
-          return inputFormat;
-        },
-      },
-      {
-        name: 'keyFormat.featureSpec',
-        label: 'Kafka key JSON parser features',
-        type: 'json',
-        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
-        hideInMore: true,
-        info: (
-          <>
-            <p>
-              <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
-                JSON parser features
-              </ExternalLink>{' '}
-              supported by Jackson library. Those features will be applied when parsing the input
-              JSON data.
-            </p>
-            <p>
-              Example:{' '}
-              <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.assumeNewlineDelimited',
-        label: 'Kafka key assume newline delimited',
-        type: 'boolean',
-        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
-        disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
-        defaultValue: false,
-        hideInMore: true,
-        info: (
-          <>
-            <p>
-              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
-              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
-              events that are present in the same streaming record will be discarded.
-            </p>
-            <p>
-              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
-              can be <Code>true</Code>) affect only how parsing exceptions are handled.
-            </p>
-            <p>
-              If the input is known to be newline delimited JSON (each individual JSON event is
-              contained in a single line, separated by newlines), setting this option to true allows
-              for more flexible parsing exception handling. Only the lines with invalid JSON syntax
-              will be discarded, while lines containing valid JSON events will still be ingested.
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.useJsonNodeReader',
-        label: 'Kafka key use JSON node reader',
-        type: 'boolean',
-        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
-        disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
-        defaultValue: false,
-        hideInMore: true,
-        info: (
-          <>
-            {' '}
-            <p>
-              In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single
-              JSON event spans multiple lines). However, if a parsing exception occurs, all JSON
-              events that are present in the same streaming record will be discarded.
-            </p>
-            <p>
-              <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one
-              can be <Code>true</Code>) affect only how parsing exceptions are handled.
-            </p>
-            <p>
-              When ingesting multi-line JSON events, enabling this option will enable the use of a
-              JSON parser which will retain any valid JSON events encountered within a streaming
-              record prior to when a parsing exception occurred.
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.delimiter',
-        label: 'Kafka key delimiter',
-        type: 'string',
-        defaultValue: '\t',
-        suggestions: ['\t', ';', '|', '#'],
-        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'tsv',
-        info: <>A custom delimiter for data values.</>,
-      },
-      {
-        name: 'keyFormat.pattern',
-        label: 'Kafka key pattern',
-        type: 'string',
-        defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'regex',
-        required: true,
-      },
-      {
-        name: 'keyFormat.skipHeaderRows',
-        label: 'Kafka key skip header rows',
-        type: 'number',
-        defaultValue: 0,
-        defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
-        min: 0,
-        info: (
-          <>
-            If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.findColumnsFromHeader',
-        label: 'Kafka key find columns from header',
-        type: 'boolean',
-        defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
-        required: true,
-        hideInMore: true,
-        info: (
-          <>
-            If this is set, find the column names from the header row. Note that
-            <Code>skipHeaderRows</Code> will be applied before finding column names from the header.
-            For example, if you set <Code>skipHeaderRows</Code> to 2 and{' '}
-            <Code>findColumnsFromHeader</Code> to true, the task will skip the first two lines and
-            then extract column information from the third line.
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.columns',
-        label: 'Kafka key columns',
-        type: 'string-array',
-        required: true,
-        defined: inputFormat =>
-          (oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv') &&
-            deepGet(inputFormat, 'keyFormat.findColumnsFromHeader') === false) ||
-          deepGet(inputFormat, 'keyFormat.type') === 'regex',
-        hideInMore: true,
-        info: (
-          <>
-            Only the value of the first column will be read, the name of the column will be ignored
-            so enter anything here.
-          </>
-        ),
-      },
-      {
-        name: 'keyFormat.listDelimiter',
-        label: 'Kafka key list delimiter',
-        type: 'string',
-        defaultValue: '\x01',
-        suggestions: ['\x01', '\x00'],
-        defined: inputFormat =>
-          oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv', 'regex'),
-        info: <>A custom delimiter for multi-value dimensions.</>,
-      },
-      {
-        name: 'keyFormat.binaryAsString',
-        label: 'Kafka key list binary as string',
-        type: 'boolean',
-        defaultValue: false,
-        defined: inputFormat =>
-          oneOf(
-            deepGet(inputFormat, 'valueFormat.type'),
-            'parquet',
-            'orc',
-            'avro_ocf',
-            'avro_stream',
-          ),
-        info: (
-          <>
-            Specifies if the binary column which is not logically marked as a string should be
-            treated as a UTF-8 encoded string.
-          </>
-        ),
-      },
+  // -----------------------------------------------------
+  // keyFormat fields
 
-      // keyColumnName
-      {
-        name: 'keyColumnName',
-        label: 'Kafka key column name',
-        type: 'string',
-        defaultValue: 'kafka.key',
-        defined: inputFormat => Boolean(deepGet(inputFormat, 'keyFormat.type')),
-        info: `Custom prefix for all the header columns.`,
-      },
+  {
+    name: 'keyFormat.type',
+    label: 'Kafka key input format',
+    type: 'string',
+    suggestions: [
+      undefined,
+      'json',
+      'csv',
+      'tsv',
+      'parquet',
+      'orc',
+      'avro_ocf',
+      'avro_stream',
+      'regex',
+    ],
+    placeholder: `(don't parse Kafka key)`,
+    defined: typeIs('kafka'),
+    info: (
+      <>
+        <p>The parser used to parse the key of the Kafka message.</p>
+        <p>
+          For more information see{' '}
+          <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
+            the documentation
+          </ExternalLink>
+          .
+        </p>
+      </>
+    ),
+    adjustment: inputFormat => {
+      const keyFormatType = deepGet(inputFormat, 'keyFormat.type');
+      // If the user selects one of these formats then populate the columns (that are in any case meaningless in this context)
+      // with an initial value.
+      switch (keyFormatType) {
+        case 'regex':
+          inputFormat = deepSet(inputFormat, 'keyFormat.pattern', '([\\s\\S]*)');
+          inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
+          break;
 
-      // -----------------------------------------------------
+        case 'csv':
+        case 'tsv':
+          inputFormat = deepSet(inputFormat, 'keyFormat.findColumnsFromHeader', false);
+          inputFormat = deepSet(inputFormat, 'keyFormat.columns', ['x']);
+          break;
+      }
+      return inputFormat;
+    },
+  },
+  {
+    name: 'keyFormat.featureSpec',
+    label: 'Kafka key JSON parser features',
+    type: 'json',
+    defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+    hideInMore: true,
+    info: (
+      <>
+        <p>
+          <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
+            JSON parser features
+          </ExternalLink>{' '}
+          supported by Jackson library. Those features will be applied when parsing the input JSON
+          data.
+        </p>
+        <p>
+          Example:{' '}
+          <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.assumeNewlineDelimited',
+    label: 'Kafka key assume newline delimited',
+    type: 'boolean',
+    defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+    disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
+    defaultValue: false,
+    hideInMore: true,
+    info: (
+      <>
+        <p>
+          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
+          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
+          are present in the same streaming record will be discarded.
+        </p>
+        <p>
+          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
+          <Code>true</Code>) affect only how parsing exceptions are handled.
+        </p>
+        <p>
+          If the input is known to be newline delimited JSON (each individual JSON event is
+          contained in a single line, separated by newlines), setting this option to true allows for
+          more flexible parsing exception handling. Only the lines with invalid JSON syntax will be
+          discarded, while lines containing valid JSON events will still be ingested.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.useJsonNodeReader',
+    label: 'Kafka key use JSON node reader',
+    type: 'boolean',
+    defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'json',
+    disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
+    defaultValue: false,
+    hideInMore: true,
+    info: (
+      <>
+        {' '}
+        <p>
+          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
+          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
+          are present in the same streaming record will be discarded.
+        </p>
+        <p>
+          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
+          <Code>true</Code>) affect only how parsing exceptions are handled.
+        </p>
+        <p>
+          When ingesting multi-line JSON events, enabling this option will enable the use of a JSON
+          parser which will retain any valid JSON events encountered within a streaming record prior
+          to when a parsing exception occurred.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.delimiter',
+    label: 'Kafka key delimiter',
+    type: 'string',
+    defaultValue: '\t',
+    suggestions: ['\t', ';', '|', '#'],
+    defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'tsv',
+    info: <>A custom delimiter for data values.</>,
+  },
+  {
+    name: 'keyFormat.pattern',
+    label: 'Kafka key pattern',
+    type: 'string',
+    defined: inputFormat => deepGet(inputFormat, 'keyFormat.type') === 'regex',
+    required: true,
+  },
+  {
+    name: 'keyFormat.skipHeaderRows',
+    label: 'Kafka key skip header rows',
+    type: 'number',
+    defaultValue: 0,
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
+    min: 0,
+    info: (
+      <>
+        If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.findColumnsFromHeader',
+    label: 'Kafka key find columns from header',
+    type: 'boolean',
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv'),
+    required: true,
+    hideInMore: true,
+    info: (
+      <>
+        If this is set, find the column names from the header row. Note that
+        <Code>skipHeaderRows</Code> will be applied before finding column names from the header. For
+        example, if you set <Code>skipHeaderRows</Code> to 2 and <Code>findColumnsFromHeader</Code>{' '}
+        to true, the task will skip the first two lines and then extract column information from the
+        third line.
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.columns',
+    label: 'Kafka key columns',
+    type: 'string-array',
+    required: true,
+    defined: inputFormat =>
+      (oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv') &&
+        deepGet(inputFormat, 'keyFormat.findColumnsFromHeader') === false) ||
+      deepGet(inputFormat, 'keyFormat.type') === 'regex',
+    hideInMore: true,
+    info: (
+      <>
+        Only the value of the first column will be read, the name of the column will be ignored so
+        enter anything here.
+      </>
+    ),
+  },
+  {
+    name: 'keyFormat.listDelimiter',
+    label: 'Kafka key list delimiter',
+    type: 'string',
+    defaultValue: '\x01',
+    suggestions: ['\x01', '\x00'],
+    defined: inputFormat => oneOf(deepGet(inputFormat, 'keyFormat.type'), 'csv', 'tsv', 'regex'),
+    info: <>A custom delimiter for multi-value dimensions.</>,
+  },
+  {
+    name: 'keyFormat.binaryAsString',
+    label: 'Kafka key list binary as string',
+    type: 'boolean',
+    defaultValue: false,
+    defined: inputFormat =>
+      oneOf(deepGet(inputFormat, 'valueFormat.type'), 'parquet', 'orc', 'avro_ocf', 'avro_stream'),
+    info: (
+      <>
+        Specifies if the binary column which is not logically marked as a string should be treated
+        as a UTF-8 encoded string.
+      </>
+    ),
+  },
 
-      {
-        name: 'headerFormat.type',
-        label: 'Kafka header format type',
-        type: 'string',
-        defined: typeIs('kafka'),
-        placeholder: `(don't parse Kafka herders)`,
-        suggestions: [undefined, 'string'],
-      },
-      {
-        name: 'headerFormat.encoding',
-        label: 'Kafka header format encoding',
-        type: 'string',
-        defaultValue: 'UTF-8',
-        defined: inputFormat => deepGet(inputFormat, 'headerFormat.type') === 'string',
-        suggestions: ['UTF-8', 'UTF-16BE', 'UTF-16LE', 'UTF-16', 'US-ASCII', 'ISO-8859-1'],
-      },
-      {
-        name: 'headerColumnPrefix',
-        label: 'Kafka header column prefix',
-        type: 'string',
-        defaultValue: 'kafka.header.',
-        defined: typeIs('kafka'),
-        info: `Custom prefix for all the header columns.`,
-      },
-    );
-  }
+  // keyColumnName
+  {
+    name: 'keyColumnName',
+    label: 'Kafka key column name',
+    type: 'string',
+    defaultValue: 'kafka.key',
+    defined: inputFormat => Boolean(deepGet(inputFormat, 'keyFormat.type')),
+    info: `Custom prefix for all the header columns.`,
+  },
 
-  return fields;
-}
+  // -----------------------------------------------------
 
-export const BATCH_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(undefined);
-export const KINESIS_INPUT_FORMAT_FIELDS: Field<InputFormat>[] =
-  generateInputFormatFields('kinesis');
-export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields('kafka');
+  {
+    name: 'headerFormat.type',
+    label: 'Kafka header format type',
+    type: 'string',
+    defined: typeIs('kafka'),
+    placeholder: `(don't parse Kafka herders)`,
+    suggestions: [undefined, 'string'],
+  },
+  {
+    name: 'headerFormat.encoding',
+    label: 'Kafka header format encoding',
+    type: 'string',
+    defaultValue: 'UTF-8',
+    defined: inputFormat => deepGet(inputFormat, 'headerFormat.type') === 'string',
+    suggestions: ['UTF-8', 'UTF-16BE', 'UTF-16LE', 'UTF-16', 'US-ASCII', 'ISO-8859-1'],
+  },
+  {
+    name: 'headerColumnPrefix',
+    label: 'Kafka header column prefix',
+    type: 'string',
+    defaultValue: 'kafka.header.',
+    defined: typeIs('kafka'),
+    info: `Custom prefix for all the header columns.`,
+  },
+];
 
 export function issueWithInputFormat(inputFormat: InputFormat | undefined): string | undefined {
   return AutoForm.issueWithModel(inputFormat, BATCH_INPUT_FORMAT_FIELDS);
diff --git a/web-console/src/views/load-data-view/info-messages.tsx b/web-console/src/views/load-data-view/info-messages.tsx
index dbd08eb89c11..5c93b7a107f1 100644
--- a/web-console/src/views/load-data-view/info-messages.tsx
+++ b/web-console/src/views/load-data-view/info-messages.tsx
@@ -57,13 +57,7 @@ export const ConnectMessage = React.memo(function ConnectMessage(props: ConnectM
   );
 });
 
-export interface ParserMessageProps {
-  canHaveNestedData: boolean;
-}
-
-export const ParserMessage = React.memo(function ParserMessage(props: ParserMessageProps) {
-  const { canHaveNestedData } = props;
-
+export const ParserMessage = React.memo(function ParserMessage() {
   return (
     <FormGroup>
       <Callout>
@@ -71,24 +65,11 @@ export const ParserMessage = React.memo(function ParserMessage(props: ParserMess
           Druid needs to parse data as columns. Determine the format of your data and ensure that
           the columns are accurately parsed.
         </p>
-        {canHaveNestedData && (
-          <>
-            <p>
-              If you have nested data, you can ingest it into{' '}
-              <ExternalLink href={`${getLink('DOCS')}/querying/nested-columns.html`}>
-                COMPLEX&lt;json&gt;
-              </ExternalLink>{' '}
-              columns.
-            </p>
-            <p>
-              Alternatively, you can explicitly{' '}
-              <ExternalLink href={`${getLink('DOCS')}/ingestion/index.html#flattenspec`}>
-                flatten
-              </ExternalLink>{' '}
-              it here.
-            </p>
-          </>
-        )}
+        <p>
+          If you have nested data, you can ingest it as{' '}
+          <ExternalLink href={`${getLink('DOCS')}/querying/nested-columns.html`}>json</ExternalLink>{' '}
+          dimensions.
+        </p>
         <LearnMore href={`${getLink('DOCS')}/ingestion/data-formats.html`} />
       </Callout>
     </FormGroup>
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 3bf6a4e949e6..2c152d5c8a5a 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -110,7 +110,6 @@ import {
   issueWithSampleData,
   joinFilter,
   KAFKA_INPUT_FORMAT_FIELDS,
-  KINESIS_INPUT_FORMAT_FIELDS,
   KNOWN_FILTER_TYPES,
   MAX_INLINE_DATA_LENGTH,
   METRIC_SPEC_FIELDS,
@@ -120,6 +119,7 @@ import {
   PRIMARY_PARTITION_RELATED_FORM_FIELDS,
   removeTimestampTransform,
   splitFilter,
+  STREAMING_INPUT_FORMAT_FIELDS,
   TIME_COLUMN,
   TIMESTAMP_SPEC_FIELDS,
   TRANSFORM_FIELDS,
@@ -134,6 +134,7 @@ import {
   compact,
   deepDelete,
   deepGet,
+  deepMove,
   deepSet,
   deepSetMulti,
   EMPTY_ARRAY,
@@ -1493,18 +1494,41 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
     const specType = getSpecType(spec);
     const inputFormatFields =
-      specType === 'kafka'
+      inputFormat?.type === 'kafka'
         ? KAFKA_INPUT_FORMAT_FIELDS
-        : specType === 'kinesis'
-        ? KINESIS_INPUT_FORMAT_FIELDS
+        : isStreamingSpec(spec)
+        ? STREAMING_INPUT_FORMAT_FIELDS
         : BATCH_INPUT_FORMAT_FIELDS;
+
     return (
       <>
         <div className="main">{mainFill}</div>
         <div className="control">
-          <ParserMessage canHaveNestedData={canHaveNestedData} />
+          <ParserMessage />
           {!selectedFlattenField && (
             <>
+              {specType === 'kafka' && (
+                <FormGroup>
+                  <Switch
+                    label="Only parse Kafka payload"
+                    checked={inputFormat?.type !== 'kafka'}
+                    onChange={() => {
+                      this.updateSpecPreview(
+                        inputFormat?.type === 'kafka'
+                          ? deepMove(
+                              spec,
+                              'spec.ioConfig.inputFormat.valueFormat',
+                              'spec.ioConfig.inputFormat',
+                            )
+                          : deepSet(spec, 'spec.ioConfig.inputFormat', {
+                              type: 'kafka',
+                              valueFormat: inputFormat,
+                            }),
+                      );
+                    }}
+                  />
+                </FormGroup>
+              )}
               <AutoForm
                 fields={inputFormatFields}
                 model={inputFormat}

From b56ebd087ea24db55bc46b9f46b816930a0f6258 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Apr 2023 15:55:33 -0700
Subject: [PATCH 12/13] even better form layout

---
 .../input-format/input-format.tsx             | 187 +-----------------
 .../views/load-data-view/load-data-view.scss  |   4 +
 .../views/load-data-view/load-data-view.tsx   |  99 ++++++----
 3 files changed, 69 insertions(+), 221 deletions(-)

diff --git a/web-console/src/druid-models/input-format/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
index f92a1844c667..1b7ff92b2486 100644
--- a/web-console/src/druid-models/input-format/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -234,7 +234,7 @@ function generateInputFormatFields(streaming: boolean) {
 
 export const BATCH_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(false);
 export const STREAMING_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(true);
-export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
+export const KAFKA_EXTRA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
   {
     name: 'timestampColumnName',
     label: 'Kafka timestamp column name',
@@ -244,189 +244,6 @@ export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     info: `Name of the column for the kafka record's timestamp.`,
   },
 
-  // -----------------------------------------------------
-  // valueFormat fields
-
-  {
-    name: 'valueFormat.type',
-    label: 'Kafka payload input format',
-    type: 'string',
-    suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
-    required: true,
-    defined: typeIs('kafka'),
-    info: (
-      <>
-        <p>The parser used to parse the payload of the Kafka message.</p>
-        <p>
-          For more information see{' '}
-          <ExternalLink href={`${getLink('DOCS')}/ingestion/data-formats.html`}>
-            the documentation
-          </ExternalLink>
-          .
-        </p>
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.featureSpec',
-    label: 'Kafka payload JSON parser features',
-    type: 'json',
-    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-    info: (
-      <>
-        <p>
-          <ExternalLink href="https://github.com/FasterXML/jackson-core/wiki/JsonParser-Features">
-            JSON parser features
-          </ExternalLink>{' '}
-          supported by Jackson library. Those features will be applied when parsing the input JSON
-          data.
-        </p>
-        <p>
-          Example:{' '}
-          <Code>{`{ "ALLOW_SINGLE_QUOTES": true, "ALLOW_UNQUOTED_FIELD_NAMES": true }`}</Code>
-        </p>
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.assumeNewlineDelimited',
-    label: 'Kafka payload assume newline delimited',
-    type: 'boolean',
-    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-    disabled: inputFormat => Boolean(inputFormat.useJsonNodeReader),
-    defaultValue: false,
-    info: (
-      <>
-        <p>
-          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
-          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
-          are present in the same streaming record will be discarded.
-        </p>
-        <p>
-          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
-          <Code>true</Code>) affect only how parsing exceptions are handled.
-        </p>
-        <p>
-          If the input is known to be newline delimited JSON (each individual JSON event is
-          contained in a single line, separated by newlines), setting this option to true allows for
-          more flexible parsing exception handling. Only the lines with invalid JSON syntax will be
-          discarded, while lines containing valid JSON events will still be ingested.
-        </p>
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.useJsonNodeReader',
-    label: 'Kafka payload use JSON node reader',
-    type: 'boolean',
-    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'json',
-    disabled: inputFormat => Boolean(inputFormat.assumeNewlineDelimited),
-    defaultValue: false,
-    info: (
-      <>
-        {' '}
-        <p>
-          In streaming ingestion, multi-line JSON events can be ingested (i.e. where a single JSON
-          event spans multiple lines). However, if a parsing exception occurs, all JSON events that
-          are present in the same streaming record will be discarded.
-        </p>
-        <p>
-          <Code>assumeNewlineDelimited</Code> and <Code>useJsonNodeReader</Code> (at most one can be{' '}
-          <Code>true</Code>) affect only how parsing exceptions are handled.
-        </p>
-        <p>
-          When ingesting multi-line JSON events, enabling this option will enable the use of a JSON
-          parser which will retain any valid JSON events encountered within a streaming record prior
-          to when a parsing exception occurred.
-        </p>
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.delimiter',
-    label: 'Kafka payload delimiter',
-    type: 'string',
-    defaultValue: '\t',
-    suggestions: ['\t', ';', '|', '#'],
-    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'tsv',
-    info: <>A custom delimiter for data values.</>,
-  },
-  {
-    name: 'valueFormat.pattern',
-    label: 'Kafka payload pattern',
-    type: 'string',
-    defined: inputFormat => deepGet(inputFormat, 'valueFormat.type') === 'regex',
-    required: true,
-  },
-  {
-    name: 'valueFormat.skipHeaderRows',
-    label: 'Kafka payload skip header rows',
-    type: 'number',
-    defaultValue: 0,
-    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
-    min: 0,
-    info: (
-      <>
-        If this is set, skip the first <Code>skipHeaderRows</Code> rows from each file.
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.findColumnsFromHeader',
-    label: 'Kafka payload find columns from header',
-    type: 'boolean',
-    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv'),
-    required: true,
-    info: (
-      <>
-        If this is set, find the column names from the header row. Note that
-        <Code>skipHeaderRows</Code> will be applied before finding column names from the header. For
-        example, if you set <Code>skipHeaderRows</Code> to 2 and <Code>findColumnsFromHeader</Code>{' '}
-        to true, the task will skip the first two lines and then extract column information from the
-        third line.
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.columns',
-    label: 'Kafka payload columns',
-    type: 'string-array',
-    required: true,
-    defined: inputFormat =>
-      (oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv') &&
-        deepGet(inputFormat, 'valueFormat.findColumnsFromHeader') === false) ||
-      deepGet(inputFormat, 'valueFormat.type') === 'regex',
-    info: (
-      <>
-        Specifies the columns of the data. The columns should be in the same order with the columns
-        of your data.
-      </>
-    ),
-  },
-  {
-    name: 'valueFormat.listDelimiter',
-    label: 'Kafka payload list delimiter',
-    type: 'string',
-    defaultValue: '\x01',
-    suggestions: ['\x01', '\x00'],
-    defined: inputFormat => oneOf(deepGet(inputFormat, 'valueFormat.type'), 'csv', 'tsv', 'regex'),
-    info: <>A custom delimiter for multi-value dimensions.</>,
-  },
-  {
-    name: 'valueFormat.binaryAsString',
-    label: 'Kafka payload list binary as string',
-    type: 'boolean',
-    defaultValue: false,
-    defined: inputFormat =>
-      oneOf(deepGet(inputFormat, 'valueFormat.type'), 'parquet', 'orc', 'avro_ocf', 'avro_stream'),
-    info: (
-      <>
-        Specifies if the binary column which is not logically marked as a string should be treated
-        as a UTF-8 encoded string.
-      </>
-    ),
-  },
-
   // -----------------------------------------------------
   // keyFormat fields
 
@@ -676,7 +493,7 @@ export const KAFKA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     label: 'Kafka header column prefix',
     type: 'string',
     defaultValue: 'kafka.header.',
-    defined: typeIs('kafka'),
+    defined: inputFormat => deepGet(inputFormat, 'headerFormat.type') === 'string',
     info: `Custom prefix for all the header columns.`,
   },
 ];
diff --git a/web-console/src/views/load-data-view/load-data-view.scss b/web-console/src/views/load-data-view/load-data-view.scss
index 124bf7db316a..8532313b10bd 100644
--- a/web-console/src/views/load-data-view/load-data-view.scss
+++ b/web-console/src/views/load-data-view/load-data-view.scss
@@ -316,4 +316,8 @@ $actual-icon-height: 400px;
     width: 100%;
     height: 100% !important;
   }
+
+  .parse-metadata {
+    border-top: 1px solid $gray1;
+  }
 }
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 2c152d5c8a5a..2561b2b6bc14 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -109,7 +109,7 @@ import {
   issueWithIoConfig,
   issueWithSampleData,
   joinFilter,
-  KAFKA_INPUT_FORMAT_FIELDS,
+  KAFKA_EXTRA_INPUT_FORMAT_FIELDS,
   KNOWN_FILTER_TYPES,
   MAX_INLINE_DATA_LENGTH,
   METRIC_SPEC_FIELDS,
@@ -1493,12 +1493,17 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     }
 
     const specType = getSpecType(spec);
-    const inputFormatFields =
-      inputFormat?.type === 'kafka'
-        ? KAFKA_INPUT_FORMAT_FIELDS
-        : isStreamingSpec(spec)
-        ? STREAMING_INPUT_FORMAT_FIELDS
-        : BATCH_INPUT_FORMAT_FIELDS;
+    const inputFormatFields = isStreamingSpec(spec)
+      ? STREAMING_INPUT_FORMAT_FIELDS
+      : BATCH_INPUT_FORMAT_FIELDS;
+
+    const normalInputAutoForm = (
+      <AutoForm
+        fields={inputFormatFields}
+        model={inputFormat}
+        onChange={p => this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))}
+      />
+    );
 
     return (
       <>
@@ -1507,38 +1512,60 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           <ParserMessage />
           {!selectedFlattenField && (
             <>
-              {specType === 'kafka' && (
-                <FormGroup>
-                  <Switch
-                    label="Only parse Kafka payload"
-                    checked={inputFormat?.type !== 'kafka'}
-                    onChange={() => {
-                      this.updateSpecPreview(
-                        inputFormat?.type === 'kafka'
-                          ? deepMove(
-                              spec,
-                              'spec.ioConfig.inputFormat.valueFormat',
-                              'spec.ioConfig.inputFormat',
-                            )
-                          : deepSet(spec, 'spec.ioConfig.inputFormat', {
-                              type: 'kafka',
-                              valueFormat: inputFormat,
-                            }),
-                      );
-                    }}
-                  />
-                </FormGroup>
+              {specType !== 'kafka' ? (
+                normalInputAutoForm
+              ) : (
+                <>
+                  {inputFormat?.type !== 'kafka' ? (
+                    normalInputAutoForm
+                  ) : (
+                    <AutoForm
+                      fields={inputFormatFields}
+                      model={inputFormat?.valueFormat}
+                      onChange={p =>
+                        this.updateSpecPreview(
+                          deepSet(spec, 'spec.ioConfig.inputFormat.valueFormat', p),
+                        )
+                      }
+                    />
+                  )}
+                  <FormGroup className="parse-metadata">
+                    <Switch
+                      label="Parse Kafka metadata (ts, headers, key)"
+                      checked={inputFormat?.type === 'kafka'}
+                      onChange={() => {
+                        this.updateSpecPreview(
+                          inputFormat?.type === 'kafka'
+                            ? deepMove(
+                                spec,
+                                'spec.ioConfig.inputFormat.valueFormat',
+                                'spec.ioConfig.inputFormat',
+                              )
+                            : deepSet(spec, 'spec.ioConfig.inputFormat', {
+                                type: 'kafka',
+                                valueFormat: inputFormat,
+                              }),
+                        );
+                      }}
+                    />
+                  </FormGroup>
+                  {inputFormat?.type === 'kafka' && (
+                    <AutoForm
+                      fields={KAFKA_EXTRA_INPUT_FORMAT_FIELDS}
+                      model={inputFormat}
+                      onChange={p =>
+                        this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
+                      }
+                    />
+                  )}
+                </>
               )}
-              <AutoForm
-                fields={inputFormatFields}
-                model={inputFormat}
-                onChange={p =>
-                  this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
-                }
-              />
               {this.renderApplyButtonBar(
                 parserQueryState,
-                AutoForm.issueWithModel(inputFormat, inputFormatFields),
+                AutoForm.issueWithModel(inputFormat, inputFormatFields) ||
+                  (inputFormat?.type === 'kafka'
+                    ? AutoForm.issueWithModel(inputFormat, KAFKA_EXTRA_INPUT_FORMAT_FIELDS)
+                    : undefined),
               )}
             </>
           )}

From 8b57966cc6040f0fa719474684d84a52462bee62 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 6 Apr 2023 18:02:58 -0700
Subject: [PATCH 13/13] rename

---
 web-console/src/druid-models/input-format/input-format.tsx | 2 +-
 web-console/src/views/load-data-view/load-data-view.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-console/src/druid-models/input-format/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
index 1b7ff92b2486..7412c56b6126 100644
--- a/web-console/src/druid-models/input-format/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -234,7 +234,7 @@ function generateInputFormatFields(streaming: boolean) {
 
 export const BATCH_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(false);
 export const STREAMING_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = generateInputFormatFields(true);
-export const KAFKA_EXTRA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
+export const KAFKA_METADATA_INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
   {
     name: 'timestampColumnName',
     label: 'Kafka timestamp column name',
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 2561b2b6bc14..9d698fe1de67 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -109,7 +109,7 @@ import {
   issueWithIoConfig,
   issueWithSampleData,
   joinFilter,
-  KAFKA_EXTRA_INPUT_FORMAT_FIELDS,
+  KAFKA_METADATA_INPUT_FORMAT_FIELDS,
   KNOWN_FILTER_TYPES,
   MAX_INLINE_DATA_LENGTH,
   METRIC_SPEC_FIELDS,
@@ -1551,7 +1551,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                   </FormGroup>
                   {inputFormat?.type === 'kafka' && (
                     <AutoForm
-                      fields={KAFKA_EXTRA_INPUT_FORMAT_FIELDS}
+                      fields={KAFKA_METADATA_INPUT_FORMAT_FIELDS}
                       model={inputFormat}
                       onChange={p =>
                         this.updateSpecPreview(deepSet(spec, 'spec.ioConfig.inputFormat', p))
@@ -1564,7 +1564,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 parserQueryState,
                 AutoForm.issueWithModel(inputFormat, inputFormatFields) ||
                   (inputFormat?.type === 'kafka'
-                    ? AutoForm.issueWithModel(inputFormat, KAFKA_EXTRA_INPUT_FORMAT_FIELDS)
+                    ? AutoForm.issueWithModel(inputFormat, KAFKA_METADATA_INPUT_FORMAT_FIELDS)
                     : undefined),
               )}
             </>