@kanaries/graphic-walker 0.2.11 → 0.2.13

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { EditorProps } from './App';
+import { IGWProps } from './App';
 import './empty_sheet.css';
 export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;
-export declare const GraphicWalker: React.FC<EditorProps>;
+export declare const GraphicWalker: React.FC<IGWProps>;

package/dist/interfaces.d.ts

@@ -22,6 +22,14 @@ export interface IMutField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
 }
+export interface IUncertainMutField {
+    fid: string;
+    key?: string;
+    name?: string;
+    disable?: boolean;
+    semanticType: ISemanticType | '?';
+    analyticType: IAnalyticType | '?';
+}
 export interface IField {
     /**
      * fid: key in data record
@@ -141,3 +149,7 @@ export interface IVisSpec {
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }
+export declare enum ISegmentKey {
+    vis = "vis",
+    data = "data"
+}

package/dist/lib/inferMeta.d.ts

@@ -0,0 +1,20 @@
+import { ISemanticType } from "visual-insights";
+import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+/**
+ * check if this array is a date time array based on some common date format
+ * @param data string array
+ * @returns
+ */
+export declare function isDateTimeArray(data: string[]): boolean;
+/**
+ * 这里目前暂时包一层，是为了解耦具体的推断实现。后续这里要调整推断的逻辑。
+ * 需要讨论这一层是否和交互层有关，如果没有关系，这一层包裹可以不存在这里，而是在visual-insights中。
+ * @param data 原始数据
+ * @param fid 字段id
+ * @returns semantic type 列表
+ */
+export declare function inferSemanticType(data: IRow[], fid: string): ISemanticType;
+export declare function inferMeta(props: {
+    dataSource: IRow[];
+    fields: IUncertainMutField[];
+}): IMutField[];

package/dist/segments/segmentNav.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.FunctionComponent<{}>;
+export default _default;

package/dist/store/commonStore.d.ts

@@ -1,4 +1,4 @@
-import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 export declare class CommonStore {
     datasets: IDataSet[];
     dataSources: IDataSource[];
@@ -12,17 +12,23 @@ export declare class CommonStore {
         show: boolean;
         position: [number, number];
     };
-    rootContainer: HTMLDivElement | null;
+    showDataConfig: boolean;
     filters: Filters;
+    segmentKey: ISegmentKey;
     constructor();
     get currentDataset(): DataSet;
+    setSegmentKey(sk: ISegmentKey): void;
     setShowDSPanel(show: boolean): void;
+    setShowDataConfig(show: boolean): void;
     setShowInsightBoard(show: boolean): void;
     showEmbededMenu(position: [number, number]): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;
+    updateCurrentDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
+    updateTempDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
     updateTempFieldAnalyticType(fieldKey: string, analyticType: IMutField['analyticType']): void;
+    updateTempFieldSemanticType(fieldKey: string, semanticType: IMutField['semanticType']): void;
     updateTempName(name: string): void;
     updateTempDS(rawData: IRow[]): void;
     updateTempSTDDS(dataset: IDataSetInfo): void;

package/dist/store/index.d.ts

@@ -9,7 +9,6 @@ export declare function destroyGWStore(): void;
 export declare function rebootGWStore(): void;
 interface StoreWrapperProps {
     keepAlive?: boolean;
-    rootContainer?: HTMLDivElement | null;
 }
 export declare class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps);

package/dist/store/visualSpecStore.d.ts

@@ -83,13 +83,13 @@ export declare class VizSpecStore {
     initMetaState(dataset: DataSet): void;
     clearState(): void;
     setVisualConfig<K extends keyof IVisualConfig>(configKey: K, value: IVisualConfig[K]): void;
-    transformCoord(coord: 'cartesian' | 'polar'): void;
+    transformCoord(coord: "cartesian" | "polar"): void;
     setChartLayout(props: {
-        mode: IVisualConfig['size']['mode'];
+        mode: IVisualConfig["size"]["mode"];
         width?: number;
         height?: number;
     }): void;
-    setExploration(value: Partial<IVisualConfig['exploration']>): void;
+    setExploration(value: Partial<IVisualConfig["exploration"]>): void;
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;
@@ -102,8 +102,8 @@ export declare class VizSpecStore {
     createLogField(stateKey: keyof DraggableFieldState, index: number): void;
     setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string): void;
     get sortCondition(): boolean;
-    setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: 'none' | 'ascending' | 'descending'): void;
-    applyDefaultSort(sortType?: 'none' | 'ascending' | 'descending'): void;
+    setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: "none" | "ascending" | "descending"): void;
+    applyDefaultSort(sortType?: "none" | "ascending" | "descending"): void;
     appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined): void;
     renderSpec(spec: Specification): void;
     destroy(): void;

package/dist/utils/dataPrep.d.ts

@@ -0,0 +1,6 @@
+import { IRow } from "visual-insights";
+import { IMutField } from "../interfaces";
+export declare function guardDataKeys(data: IRow[], metas: IMutField[]): {
+    safeData: IRow[];
+    safeMetas: IMutField[];
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { IRow, Filters, IMutField } from '../interfaces';
+import { IRow, Filters, IMutField } from "../interfaces";
 export declare function checkMajorFactor(data: IRow[], childrenData: Map<any, IRow[]>, dimensions: string[], measures: string[]): {
     majorKey: string;
     majorSum: number;
@@ -9,7 +9,7 @@ export declare function checkChildOutlier(data: IRow[], childrenData: Map<any, I
 };
 export interface IPredicate {
     key: string;
-    type: 'discrete' | 'continuous';
+    type: "discrete" | "continuous";
     range: Set<any> | [number, number];
 }
 export declare function getPredicates(selection: IRow[], dimensions: string[], measures: string[]): IPredicate[];

package/dist/utils/normalization.d.ts

@@ -1,4 +1,4 @@
-import { IRow } from '../interfaces';
+import { IRow } from "../interfaces";
 export declare function normalizeWithParent(data: IRow[], parentData: IRow[], measures: string[], syncScale: boolean): {
     normalizedData: IRow[];
     normalizedParentData: IRow[];

package/dist/utils/save.d.ts

@@ -4,9 +4,9 @@ export declare function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[];
 export declare function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[];
 interface IStoInfo {
     datasets: IDataSet[];
-    specList: ({
-        [K in keyof IVisSpec]: K extends 'config' ? Partial<IVisSpec[K]> : IVisSpec[K];
-    })[];
+    specList: {
+        [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
+    }[];
     dataSources: IDataSource[];
 }
 export declare function stringifyGWContent(info: IStoInfo): string;

package/dist/utils/throttle.d.ts

@@ -1,5 +1,5 @@
 declare const throttle: (fn: () => void, time: number, options?: Partial<{
     leading: boolean;
     trailing: boolean;
-}>) => () => void;
+}>) => (() => void);
 export default throttle;

package/dist/vis/temporalFormat.d.ts

@@ -0,0 +1,10 @@
+export declare function getVegaTimeFormatRules(lang: string): {
+    dateTime: string;
+    date: string;
+    time: string;
+    periods: string[];
+    days: string[];
+    shortDays: string[];
+    months: string[];
+    shortMonths: string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Specification } from "visual-insights";
 import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { toJS } from "mobx";
 import { useTranslation } from "react-i18next";
-import { IMutField, IRow } from "./interfaces";
+import { IMutField, IRow, ISegmentKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
 import { Container, NestContainer } from "./components/container";
@@ -20,9 +20,11 @@ import { preAnalysis, destroyWorker } from "./services";
 import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
 import FilterField from "./fields/filterField";
-import PageNav from "./components/pageNav";
+import { guardDataKeys } from "./utils/dataPrep";
+import SegmentNav from "./segments/segmentNav";
+import DatasetConfig from "./dataSource/datasetConfig";
 
-export interface EditorProps {
+export interface IGWProps {
     dataSource?: IRow[];
     rawFields?: IMutField[];
     spec?: Specification;
@@ -30,15 +32,26 @@ export interface EditorProps {
     i18nLang?: string;
     i18nResources?: { [lang: string]: Record<string, string | any> };
     keepAlive?: boolean;
-    fixContainer?: boolean;
+    /**
+     * auto parse field key into a safe string. default is true
+     */
+    fieldKeyGuard?: boolean;
 }
 
-const App: React.FC<EditorProps> = (props) => {
-    const { dataSource = [], rawFields = [], spec, i18nLang = "en-US", i18nResources, hideDataSourceConfig } = props;
+const App: React.FC<IGWProps> = (props) => {
+    const {
+        dataSource = [],
+        rawFields = [],
+        spec,
+        i18nLang = "en-US",
+        i18nResources,
+        hideDataSourceConfig,
+        fieldKeyGuard = true,
+    } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
 
-    const { currentDataset, datasets, vizEmbededMenu } = commonStore;
+    const { currentDataset, datasets, vizEmbededMenu, segmentKey } = commonStore;
 
     const { t, i18n } = useTranslation();
     const curLang = i18n.language;
@@ -55,16 +68,30 @@ const App: React.FC<EditorProps> = (props) => {
         }
     }, [i18nLang, curLang]);
 
+    const safeDataset = useMemo(() => {
+        let safeData = dataSource;
+        let safeMetas = rawFields;
+        if (fieldKeyGuard) {
+            const { safeData: _safeData, safeMetas: _safeMetas } = guardDataKeys(dataSource, rawFields);
+            safeData = _safeData;
+            safeMetas = _safeMetas;
+        }
+        return {
+            safeData,
+            safeMetas,
+        };
+    }, [rawFields, dataSource, fieldKeyGuard]);
+
     // use as an embeding module, use outside datasource from props.
     useEffect(() => {
-        if (dataSource.length > 0) {
+        if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0) {
             commonStore.addAndUseDS({
                 name: "context dataset",
-                dataSource: dataSource,
-                rawFields,
+                dataSource: safeDataset.safeData,
+                rawFields: safeDataset.safeMetas,
             });
         }
-    }, [dataSource, rawFields]);
+    }, [safeDataset]);
 
     // do preparation analysis work when using a new dataset
     useEffect(() => {
@@ -97,48 +124,63 @@ const App: React.FC<EditorProps> = (props) => {
             <div className="">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
-                    <VisNav />
+                    <SegmentNav />
+                    {
+                        segmentKey === ISegmentKey.vis && <VisNav />
+                    }
                 </div>
-                <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                    <VisualSettings rendererHandler={rendererRef} />
-                    <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
-                        <div className="md:col-span-3 xl:col-span-1">
-                            <DatasetFields />
-                        </div>
-                        <div className="md:col-span-2 xl:col-span-1">
-                            <FilterField />
-                            <AestheticFields />
-                        </div>
-                        <div className="md:col-span-7 xl:col-span-4">
-                            <div>
-                                <PosFields />
+                {segmentKey === ISegmentKey.vis && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <VisualSettings rendererHandler={rendererRef} />
+                        <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
+                            <div className="md:col-span-3 xl:col-span-1">
+                                <DatasetFields />
+                            </div>
+                            <div className="md:col-span-2 xl:col-span-1">
+                                <FilterField />
+                                <AestheticFields />
+                            </div>
+                            <div className="md:col-span-7 xl:col-span-4">
+                                <div>
+                                    <PosFields />
+                                </div>
+                                <NestContainer
+                                    style={{ minHeight: "600px", overflow: "auto" }}
+                                    onMouseLeave={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                    onClick={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                >
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
+                                    <InsightBoard />
+                                    {vizEmbededMenu.show && (
+                                        <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
+                                            <div
+                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+                                                onClick={() => {
+                                                    commonStore.closeEmbededMenu();
+                                                    commonStore.setShowInsightBoard(true);
+                                                }}
+                                            >
+                                                <span className="flex-1 pr-2">
+                                                    {t("App.labels.data_interpretation")}
+                                                </span>
+                                                <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
+                                            </div>
+                                        </ClickMenu>
+                                    )}
+                                </NestContainer>
                             </div>
-                            <NestContainer
-                                style={{ minHeight: "600px", overflow: "auto" }}
-                                onMouseLeave={() => {
-                                    vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                }}
-                            >
-                                {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
-                                <InsightBoard />
-                                {vizEmbededMenu.show && (
-                                    <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
-                                        <div
-                                            className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
-                                            onClick={() => {
-                                                commonStore.closeEmbededMenu();
-                                                commonStore.setShowInsightBoard(true);
-                                            }}
-                                        >
-                                            <span className="flex-1 pr-2">{t("App.labels.data_interpretation")}</span>
-                                            <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
-                                        </div>
-                                    </ClickMenu>
-                                )}
-                            </NestContainer>
                         </div>
-                    </div>
-                </Container>
+                    </Container>
+                )}
+                {segmentKey === ISegmentKey.data && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <DatasetConfig />
+                    </Container>
+                )}
             </div>
         </div>
     );

package/src/components/button/base.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface ButtonBaseProps {
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    text: string;
+    disabled?: boolean;
+}

package/src/components/button/default.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default DefaultButton;

package/src/components/button/primary.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const PrimaryButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default PrimaryButton;

package/src/components/dataTable/index.tsx

@@ -0,0 +1,187 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import { IMutField, IRow } from "../../interfaces";
+import { useTranslation } from "react-i18next";
+import Pagination from "./pagination";
+
+interface DataTableProps {
+    size?: number;
+    metas: IMutField[];
+    data: IRow[];
+    onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
+}
+const Container = styled.div`
+    overflow-x: auto;
+    max-height: 660px;
+    overflow-y: auto;
+    table {
+        box-sizing: content-box;
+        border-collapse: collapse;
+        font-size: 12px;
+        thead {
+            th {
+            }
+            th.number {
+                border-top: 3px solid #5cdbd3;
+            }
+            th.text {
+                border-top: 3px solid #69c0ff;
+            }
+        }
+        tbody {
+            td {
+            }
+            td.number {
+                text-align: right;
+            }
+            td.text {
+                text-align: left;
+            }
+        }
+    }
+`;
+const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
+const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
+// function getCellType(field: IMutField): 'number' | 'text' {
+//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
+// }
+function getHeaderType(field: IMutField): "number" | "text" {
+    return field.analyticType === "dimension" ? "text" : "number";
+}
+
+function getHeaderClassNames(field: IMutField) {
+    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
+}
+
+function getSemanticColors(field: IMutField): string {
+    switch (field.semanticType) {
+        case "nominal":
+            return "bg-indigo-100 text-indigo-800";
+        case "ordinal":
+            return "bg-purple-100 text-purple-800";
+        case "quantitative":
+            return "bg-green-100 text-green-800";
+        case "temporal":
+            return "bg-yellow-100 text-yellow-800";
+        default:
+            return "bg-gray-400";
+    }
+}
+
+const DataTable: React.FC<DataTableProps> = (props) => {
+    const { size = 10, data, metas, onMetaChange } = props;
+    const [pageIndex, setPageIndex] = useState(0);
+    const { t } = useTranslation();
+
+    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return ANALYTIC_TYPE_LIST.map((at) => ({
+            value: at,
+            label: t(`constant.analytic_type.${at}`),
+        }));
+    }, []);
+
+    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return SEMANTIC_TYPE_LIST.map((st) => ({
+            value: st,
+            label: t(`constant.semantic_type.${st}`),
+        }));
+    }, []);
+
+    const from = pageIndex * size;
+    const to = Math.min((pageIndex + 1) * size, data.length - 1);
+
+    return (
+        <Container className="rounded border-gray-200 border">
+            <Pagination
+                total={data.length}
+                from={from + 1}
+                to={to + 1}
+                onNext={() => {
+                    setPageIndex(Math.min(Math.ceil(data.length / size) - 1, pageIndex + 1));
+                }}
+                onPrev={() => {
+                    setPageIndex(Math.max(0, pageIndex - 1));
+                }}
+            />
+            <table className="min-w-full divide-y divide-gray-30">
+                <thead className="bg-gray-50">
+                    <tr className="divide-x divide-gray-200">
+                        {metas.map((field, fIndex) => (
+                            <th key={field.fid} className={""}>
+                                <div
+                                    className={
+                                        getHeaderClassNames(field) +
+                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
+                                    }
+                                >
+                                    <b>{field.name || field.fid}</b>
+                                    <div>
+                                        <select
+                                            className={
+                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
+                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
+                                            }
+                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
+                                            value={field.analyticType}
+                                            onChange={(e) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    analyticType: e.target.value as IMutField["analyticType"],
+                                                });
+                                            }}
+                                        >
+                                            {analyticTypeList.map((type) => (
+                                                <option key={type.value} value={type.value}>
+                                                    {type.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <select
+                                            className={
+                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                getSemanticColors(field)
+                                            }
+                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
+                                            value={field.semanticType}
+                                            onChange={(e) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    semanticType: e.target.value as IMutField["semanticType"],
+                                                });
+                                            }}
+                                        >
+                                            {semanticTypeList.map((type) => (
+                                                <option key={type.value} value={type.value}>
+                                                    {type.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                </div>
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                    {data.slice(from, to).map((row, index) => (
+                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
+                            {metas.map((field) => (
+                                <td
+                                    key={field.fid + index}
+                                    className={
+                                        getHeaderType(field) +
+                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
+                                    }
+                                >
+                                    {row[field.fid]}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </Container>
+    );
+};
+
+export default DataTable;