feat: add dynamic table columns on resource page (#181)

* feat: add dynamic table columns on resource page * feat: add dynamic table columns on resource page * refactor: implement requested changes * refactor: implement requested changes
tenseijs · Nov 15, 2021 · ffa42e0 · ffa42e0
1 parent ad93113
commit ffa42e0
Showing 1 changed file with 26 additions and 35 deletions.
diff --git a/packages/cms/pages/resources/resource/resource.tsx b/packages/cms/pages/resources/resource/resource.tsx
@@ -192,42 +192,33 @@ export const Table: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = useState<any[]>([])
   const [sortField, setSortField] = useState('firstName')
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+  const { resource, applyFilter } = useResourceStore()
 
-  const columns: EuiBasicTableColumn<any>[] = [
-    {
-      field: 'firstName',
-      name: 'First name',
-      sortable: true,
-      truncateText: true
-    },
-    {
-      field: 'lastName',
-      name: 'Last name',
-      sortable: true,
-      truncateText: true
-    },
-    {
-      name: 'Date of birth',
-      field: 'dateOfBirth'
-    },
-    {
-      name: 'Nationality',
-      field: 'nationality'
-    },
-    {
-      name: 'Actions',
-      actions: [
-        {
-          name: 'Delete',
-          description: 'Delete this item',
-          icon: 'trash',
-          type: 'icon',
-          color: 'danger',
-          onClick: console.log
-        }
-      ]
-    }
-  ]
+  const columns: EuiBasicTableColumn<any>[] = useMemo(() => {
+    return [
+      ...(resource?.fields
+        .filter(field => field.showOnIndex)
+        .map(field => ({
+          name: field.name,
+          field: field.databaseField,
+          sortable: field.isSortable,
+          truncateText: true
+        })) || []),
+      {
+        name: 'Actions',
+        actions: [
+          {
+            name: 'Delete',
+            description: 'Delete this item',
+            icon: 'trash',
+            type: 'icon',
+            color: 'danger',
+            onClick: console.log
+          }
+        ]
+      }
+    ]
+  }, [resource])
 
   const items = [
     {