feat(visManager): table settings

libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx

@@ -9,11 +9,13 @@ import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/
 export type TableProps = {
   showBarplot: boolean;
   itemsPerPage: number;
+  displayAttributes: string[];
 };
 
 const configuration: TableProps = {
   itemsPerPage: 10,
   showBarplot: false,
+  displayAttributes: [],
 };
 
 export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes) => {
@@ -53,6 +55,14 @@ const TableSettings = ({
   graph: GraphMetaData;
   updateSettings: (val: any) => void;
 }) => {
+  const uniqueAttributes = new Set();
+  Object.keys(graph.nodes.types).forEach((label) => {
+    Object.keys(graph.nodes.types[label].attributes).forEach((attr: string) => {
+      uniqueAttributes.add(attr);
+    });
+  });
+  const attributes: string[] = Array.from(uniqueAttributes) as string[];
+
   return (
     <SettingsContainer>
       <Input
@@ -68,6 +78,21 @@ const TableSettings = ({
         value={configuration.showBarplot}
         onChange={(val) => updateSettings({ showBarplot: val })}
       />
+
+      <div>
+        <span className="text-sm">Attributes to display</span>
+        <div className="h-44 overflow-y-auto">
+          <Input
+            type="checkbox"
+            value={configuration.displayAttributes}
+            options={attributes}
+            onChange={(val: string[] | string) => {
+              const updatedVal = Array.isArray(val) ? val : [val];
+              updateSettings({ displayAttributes: updatedVal });
+            }}
+          />
+        </div>
+      </div>
     </SettingsContainer>
   );
 };