Merge pull request #65 from nteract/cameron.yick/fix-object-in-table-…

…cell

fix: correctly display complex datatypes (objects) in table cells

src/charts/grid.tsx

@@ -18,7 +18,12 @@ const switchMode = (currentMode: string) => {
 
 type OnChangeProps = (input: number | string) => void;
 
-type FilterIndexSignature = "integer" | "number" | "string";
+// Only some field types are filterable
+// Iterate over a union type
+// https://stackoverflow.com/a/59420158/5129731
+// Members come from values of Field.type
+const filterableFields= ['integer' , 'number' , 'string'] as const;
+type FilterIndexSignature = typeof filterableFields[number];
 
 interface NumberFilterProps {
   onChange: OnChangeProps;
@@ -147,6 +152,18 @@ interface Props {
   theme?: string;
 }
 
+const filterableFieldSet = new Set(filterableFields);
+function isFilterableFieldType (fieldType: any): fieldType is FilterIndexSignature {
+  return filterableFieldSet.has(fieldType);
+}
+
+// Non-primitive field types cannot be outputted directly as React children
+// Members come from possible values of Field.type
+const shouldStringifyFieldSet = new Set([
+  'boolean',
+  'object'
+])
+
 class DataResourceTransformGrid extends React.PureComponent<Props, State> {
   static defaultProps = {
     metadata: {},
@@ -173,22 +190,14 @@ class DataResourceTransformGrid extends React.PureComponent<Props, State> {
     const { primaryKey = [] } = schema;
 
     const tableColumns = schema.fields.map((field: Dx.Field) => {
-      if (
-        field.type === "string" ||
-        field.type === "number" ||
-        field.type === "integer"
-      ) {
+      if (isFilterableFieldType(field.type)) {
         return {
           Header: field.name,
           accessor: (rowValue: { [key: string]: any }) => rowValue[field.name],
           id: field.name,
           fixed: primaryKey.indexOf(field.name) !== -1 && "left",
           filterMethod: (filter: Dx.JSONObject, row: Dx.JSONObject) => {
-            if (
-              field.type === "string" ||
-              field.type === "number" ||
-              field.type === "integer"
-            ) {
+            if (isFilterableFieldType(field.type)) {
               return filterMethod[field.type](filters[field.name])(filter, row);
             }
           },
@@ -198,17 +207,19 @@ class DataResourceTransformGrid extends React.PureComponent<Props, State> {
             field.name,
             (newFilter: { [key: string]: Function }) => {
               this.setState({ filters: { ...filters, ...newFilter } });
-            }
-          )
+            },
+          ),
         };
       } else {
         return {
           Header: field.name,
           id: field.name,
           accessor: (rowValue: { [key: string]: any }) => {
-            return field.type === "boolean" ? rowValue[field.name].toString() : rowValue[field.name]
+            return shouldStringifyFieldSet.has(field.type)
+              ? JSON.stringify(rowValue[field.name])
+              : rowValue[field.name];
           },
-          fixed: primaryKey.indexOf(field.name) !== -1 && "left"
+          fixed: primaryKey.indexOf(field.name) !== -1 && "left",
         };
       }
     });

src/utilities/types.ts

@@ -78,7 +78,9 @@ export interface Schema {
 export const defaultPrimaryKey = "dx-default-pk";
 export interface Field {
   name: string;
-  type: string;
+  // Types are based on the json-schema standard, with some variations
+  // https://specs.frictionlessdata.io/table-schema/#types-and-formats
+  type: 'string' | 'integer' | 'number' | 'boolean' | 'datetime' | 'object' | string; // Other types are permitted, but not explicitly handled
 }