@solidstarters/solid-core-ui 1.0.2 → 1.1.0

package/src/components/core/list/SolidListView.tsx

@@ -1,25 +1,37 @@
-'use client';
-import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
-import { useRouter } from "next/navigation";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Column } from "primereact/column";
+// @ts-nocheck
+
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
 import {
   DataTable,
   DataTableFilterMeta,
   DataTableStateEvent,
 } from "primereact/datatable";
-import { Dialog } from "primereact/dialog";
+import { Column } from "primereact/column";
+import { FilterMatchMode } from "primereact/api";
+import Link from "next/link";
 import qs from "qs";
-import { useEffect, useState } from "react";
-import { SolidConfigureLayoutElement } from "../common/SolidConfigureLayoutElement";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
+import { SolidListViewColumn } from "./SolidListViewColumn";
+// import { SolidListViewOptions } from "../common/SolidListviewOptions";
 import { SolidCreateButton } from "../common/SolidCreateButton";
 import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
+import { pascalCase } from "change-case";
+import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
+import { useRouter } from "next/navigation";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
-import { SolidListViewColumn } from "./SolidListViewColumn";
+import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
+import { SolidLayoutViews } from '../common/SolidLayoutViews'
+import { FilterIcon } from '../../modelsComponents/filterIcon';
+import { OverlayPanel } from "primereact/overlaypanel";
+const getRandomInt = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
 
 type SolidListViewParams = {
   moduleName: string;
@@ -31,11 +43,215 @@ type SolidListViewParams = {
   customFilter?: any
 };
 
+// const transformRulesToFilters = (filterRules: any) => {
+//   if (!filterRules || !filterRules.children) return {};
+
+//   let operatorKey = filterRules.matchOperator === "and" ? "$and" : "$or";
+
+//   let filters = filterRules.children.map((child: any) => {
+//     if (child.type === "rule") {
+//       let filterValue ;
+//       if(child.value){
+
+//       if(child.value.length === 1){
+//         if (typeof child.value[0] === "object" && child.value[0] !== null) {
+//           filterValue = [child.value[0].value];
+//         }else{
+//           filterValue = child.value[0];
+//         }
+//       }else{
+//         if (typeof child.value[0] === "object" && child.value[0] !== null) {
+//           filterValue = child.value.map((i:any) => i.value);
+//         }else{
+//           filterValue = child.value;
+//         }
+//       }
+//     }
+
+//       let ruleFilter = { [child.fieldName]: { [child.matchMode]:  filterValue} };
+//       // If the rule has children, process them recursively
+//       if (child.children && child.children.length > 0) {
+//         let childFilters = transformRulesToFilters({ matchOperator: "and", children: child.children }).filters;
+//         return { [operatorKey]: [ruleFilter, childFilters] };
+//       }
+
+//       return ruleFilter;
+//     } else if (child.type === "rule_group") {
+//       return transformRulesToFilters(child).filters; // Recursively process rule groups
+//     }
+//   }).filter(Boolean);
+
+//   return { filters: { [operatorKey]: filters } };
+
+
+// }
+const transformRulesToFilters = (input: any) => {
+
+  // Helper function to process individual rules
+  const processRule = (rule) => {
+    if (rule.value.length > 0) {
+
+      // Ensure rule.value is always an array
+      let values = typeof rule.value[0] === "object" ? rule.value.map((i: any) => i.value) : rule.value;
+      if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between') {
+        values = values[0];
+      }
+      // Rule transformation
+      let transformedRule = {
+        [rule.fieldName]: {
+          [rule.matchMode]: values    // Assuming `value` is always an array with `value` and `label`
+        }
+      };
+
+      // If the rule has children (which means it's a rule group), process them
+      let processedFields;
+      if (rule.children && rule.children.length > 0) {
+        processedFields = rule.children.map(child => processRuleGroup(child));
+      }
+      if (processedFields) {
+        return { ...transformedRule, processedFields }
+      }
+      return { ...transformedRule }
+    }
+
+  };
+
+  // Helper function to process rule groups
+  const processRuleGroup = (ruleGroup) => {
+    const operator = ruleGroup.matchOperator === 'or' ? '$or' : '$and';
+    const children = ruleGroup.children.map(child => {
+      if (child.type === 'rule') {
+        // Process the rule
+        return processRule(child);
+      } else if (child.type === 'rule_group') {
+        // Process the rule group recursively
+        return processRuleGroup(child);
+      }
+    });
+
+    return {
+      [operator]: children
+    };
+  };
+
+  // Start processing the root rule group
+  const filterObject = processRuleGroup(input);
+
+  function liftProcessedFields(filters) {
+    if (!filters || typeof filters !== 'object') return filters;
+
+    function processArray(arr) {
+      let newArr = [];
+      for (let obj of arr) {
+        if (obj.processedFields) {
+          let processed = processArray(obj.processedFields); // Recursively process nested processedFields
+          delete obj.processedFields;
+          newArr.push(obj, ...processed);
+        } else {
+          newArr.push(obj);
+        }
+
+        for (let key in obj) {
+          if (Array.isArray(obj[key])) {
+            obj[key] = processArray(obj[key]);
+          }
+        }
+      }
+      return newArr;
+    }
+
+    for (let key in filters) {
+      if (Array.isArray(filters[key])) {
+        filters[key] = processArray(filters[key]);
+      }
+    }
+
+    return filters;
+  } return {
+    filters: liftProcessedFields(filterObject)
+  };
+}
+
+
 export const SolidListView = (params: SolidListViewParams) => {
 
+  const initialState: FilterRule[] = [
+    {
+      "id": 1,
+      "type": "rule_group",
+      "matchOperator": "or",
+      "parentRule": null,
+      "children": [
+        {
+          "id": 1738397527814,
+          "type": "rule",
+          "fieldName": "module",
+          "matchMode": "$in",
+          "value": [
+            {
+              "label": "solid-core",
+              "value": 1
+            }
+          ],
+          "parentRule": 1,
+          "children": [
+            {
+              "id": 1738397555900,
+              "type": "rule_group",
+              "matchOperator": "and",
+              "parentRule": 1738397527814,
+              "children": [
+                {
+                  "id": 1738397556184,
+                  "type": "rule",
+                  "fieldName": "name",
+                  "matchMode": "$startsWithi",
+                  "value": [
+                    "social"
+                  ],
+                  "parentRule": 1738397555900,
+                  "children": []
+                },
+                {
+                  "id": 1738397556147,
+                  "type": "rule",
+                  "fieldName": "displayName",
+                  "matchMode": "$startsWithi",
+                  "value": [
+                    "social"
+                  ],
+                  "parentRule": 1738397555900,
+                  "children": []
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": 1738397547577,
+          "type": "rule",
+          "fieldName": "module",
+          "matchMode": "$in",
+          "value": [
+            {
+              "label": "srmd-tracker",
+              "value": 4
+            }
+          ],
+          "parentRule": 1,
+          "children": []
+        }
+      ]
+    }
+  ];
+
+
   const router = useRouter()
   // TODO: The initial filter state will be created based on the fields which are present on this list view. 
   const [filters, setFilters] = useState<DataTableFilterMeta>({});
+  const [customFilter, setCustomFilter] = useState<FilterRule[]>(initialState);
+  const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
+
   const [toPopulate, setToPopulate] = useState<string[]>([]);
   const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
 
@@ -156,6 +372,9 @@ export const SolidListView = (params: SolidListViewParams) => {
 
 
 
+
+
+
   // All list view state.
   const [listViewData, setListViewData] = useState<any[]>([]);
   const [first, setFirst] = useState(0);
@@ -202,6 +421,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       }
     }
   }, [solidListViewMetaData])
+  const [deleteSolidSingleEntiry, { isSuccess: isDeleteSolidSingleEntitySuccess }] = useDeleteSolidEntityMutation()
 
   // Delete mutation 
   const [
@@ -235,7 +455,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       triggerGetSolidEntities(queryString);
       setSelectedRecords([]);
     }
-  }, [isDeleteSolidEntitiesSucess, toPopulate]);
+  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate]);
 
   // Handle pagination event.
   const onPageChange = (event: any) => {
@@ -399,6 +619,31 @@ export const SolidListView = (params: SolidListViewParams) => {
     triggerGetSolidEntities(queryString);
   };
 
+  //apply custom filter code 
+  const handleApplyCustomFilter = () => {
+    const transformedFilter = transformRulesToFilters(customFilter[0]);
+    console.log("transformedFilter", transformedFilter);
+
+    if (toPopulate) {
+      const queryData = {
+        offset: 0,
+        limit: 25,
+        populate: toPopulate,
+        sort: [`id:desc`],
+        filters: { ...transformedFilter.filters }
+      };
+      if (params.embeded) {
+
+      }
+      const queryString = qs.stringify(queryData, {
+        encodeValuesOnly: true
+      });
+
+      triggerGetSolidEntities(queryString);
+      // setShowGlobalSearchElement(false)
+      setSelectedRecords([]);
+    }
+  }
   // handle filter...
   const onFilter = (e: any) => {
     setFilters(e.filters);
@@ -418,20 +663,67 @@ export const SolidListView = (params: SolidListViewParams) => {
     }
   };
 
+  const op = useRef(null)
 
   // clickable link allowing one to open the detail / form view.
   const detailsBodyTemplate = (solidViewData: any) => {
-
     return (
-      <a onClick={() => {
-        if (params.embeded == true) {
-          params.handlePopUpOpen(solidViewData.id);
-        } else {
-          router.push(`${editButtonUrl}/${solidViewData.id}`)
-        }
-      }} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
-        <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
-      </a>
+      <div>
+
+        <Button
+          text
+          size="small"
+          className="p-0"
+          onClick={(e) =>
+            // @ts-ignore 
+            op.current.toggle(e)}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="3" height="10" viewBox="0 0 4 16" fill="none">
+            <path d="M4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14ZM4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8ZM4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979166 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979166 4 1.45 4 2Z" fill="#666666" />
+          </svg>
+        </Button>
+        <OverlayPanel ref={op} className="solid-custom-overlay" style={{ top: 10 }}>
+          <div className="flex flex-column gap-1 p-1">
+            <Button
+              className="w-8rem"
+              label="Edit"
+              size="small"
+              iconPos="left"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M3.33333 12.6667H4.28333L10.8 6.15L9.85 5.2L3.33333 11.7167V12.6667ZM2 14V11.1667L10.8 2.38333C10.9333 2.26111 11.0806 2.16667 11.2417 2.1C11.4028 2.03333 11.5722 2 11.75 2C11.9278 2 12.1 2.03333 12.2667 2.1C12.4333 2.16667 12.5778 2.26667 12.7 2.4L13.6167 3.33333C13.75 3.45556 13.8472 3.6 13.9083 3.76667C13.9694 3.93333 14 4.1 14 4.26667C14 4.44444 13.9694 4.61389 13.9083 4.775C13.8472 4.93611 13.75 5.08333 13.6167 5.21667L4.83333 14H2ZM10.3167 5.68333L9.85 5.2L10.8 6.15L10.3167 5.68333Z" fill="#F9F0FF" />
+              </svg>}
+              onClick={() => {
+                if (params.embeded == true) {
+                  params.handlePopUpOpen(solidViewData.id);
+                } else {
+                  router.push(`${editButtonUrl}/${solidViewData.id}`)
+                }
+              }}
+            />
+            <Button
+              text
+              className="w-8rem"
+              label="Delete"
+              size="small"
+              iconPos="left"
+              severity="secondary"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
+              </svg>}
+              onClick={() => deleteSolidSingleEntiry(solidViewData.id)}
+            />
+          </div>
+        </OverlayPanel>
+      </div>
+      // <a onClick={() => {
+      //   if (params.embeded == true) {
+      //     params.handlePopUpOpen(solidViewData.id);
+      //   } else {
+      //     router.push(`${editButtonUrl}/${solidViewData.id}`)
+      //   }
+      // }} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
+      //   <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+      // </a>
     );
   };
 
@@ -485,21 +777,26 @@ export const SolidListView = (params: SolidListViewParams) => {
     setListViewRowActionPopupState(false)
   }
 
+  const sizeOptions = [
+    { label: 'Compact', value: 'small', image: '/images/layout/images/compact.png' },
+    { label: 'Cozy', value: 'normal', image: '/images/layout/images/cozy.png' },
+    { label: 'Comfortable', value: 'large', image: '/images/layout/images/comfortable.png' }
+  ]
+
+  const viewModes = [
+    { label: 'List ', value: 'list', image: '/images/layout/images/cozy.png' },
+    { label: 'Kanban', value: 'kanban', image: '/images/layout/images/kanban.png' },
+  ]
+
+  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
+  const [view, setView] = useState<string | any>(viewModes[0].value);
 
   return (
     <>
-      <div className="flex gap-3 mb-3 align-items-center justify-content-between align-items-top">
-        <div className="flex gap-3  align-items-center" >
+      <div className="page-header">
+        <div className="flex gap-3 align-items-center">
+
 
-          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
-            <SolidCreateButton url={createButtonUrl} />
-          }
-          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
-            // < SolidCreateButton url={createButtonUrl} />
-            <Button type="button" icon="pi pi-plus" label="Add" size='small' className='small-button'
-              onClick={() => params.handlePopUpOpen(true)}
-            ></Button>
-          }
           {actionsAllowed.includes(`${deletePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.delete !== false && selectedRecords.length > 0 && <Button
             type="button"
             label="Delete"
@@ -521,73 +818,101 @@ export const SolidListView = (params: SolidListViewParams) => {
           }
 
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
-            <SolidGlobalSearchElement viewData={solidListViewMetaData} ></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement viewData={solidListViewMetaData} showGlobalSearchElement={showGlobalSearchElement} setShowGlobalSearchElement={setShowGlobalSearchElement} customFilter={customFilter} setCustomFilter={setCustomFilter} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
           }
         </div>
-        {params.embeded === false &&
-          <SolidConfigureLayoutElement></SolidConfigureLayoutElement>
-        }
+        <div className="flex align-items-center gap-3">
+
+          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
+            <SolidCreateButton url={createButtonUrl} />
+          }
+          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
+            // < SolidCreateButton url={createButtonUrl} />
+            <Button type="button" icon="pi pi-plus" label="Add" size='small' className='small-button'
+              onClick={() => params.handlePopUpOpen(true)}
+            ></Button>
+          }
+          <SolidLayoutViews
+            sizeOptions={sizeOptions}
+            setSize={setSize}
+            size={size}
+            viewModes={viewModes}
+            setView={setView}
+            view={view}
+          />
+
+          {/* {params.embeded === false &&
+            <SolidListViewOptions></SolidListViewOptions>
+          } */}
+        </div>
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
+      <div className="solid-datatable-wrapper">
+        <DataTable
+          value={listViewData}
+          showGridlines={false}
+          lazy
+          scrollable
+          scrollHeight="90vh"
+          size={size}
+          resizableColumns
+          paginator={true}
+          rows={rows}
+          rowsPerPageOptions={solidListViewMetaData?.data?.solidView?.layout?.attrs?.pageSizeOptions}
+          dataKey="id"
+          filters={filters}
+          emptyMessage="No Entities found."
+          onFilter={onFilter}
+          filterDisplay="menu"
+          totalRecords={totalRecords}
+          first={first}
+          onPage={onPageChange}
+          onSort={(e: DataTableStateEvent) => onSort(e)}
+          sortField={sortField}
+          sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
+          loading={loading || isLoading}
+          loadingIcon="pi pi-spinner"
+          selection={selectedRecords}
+          onSelectionChange={onSelectionChange}
+          selectionMode="multiple"
+          removableSort
+          filterIcon={<FilterIcon />}
+          tableClassName="solid-data-table"
+          paginatorClassName="solid-paginator"
+        >
 
-      <DataTable
-        value={listViewData}
-        showGridlines
-        lazy
-        size="small"
-        paginator={true}
-        rows={rows}
-        rowsPerPageOptions={solidListViewMetaData?.data?.solidView?.layout?.attrs?.pageSizeOptions}
-        dataKey="id"
-        filters={filters}
-        emptyMessage="No Entities found."
-        onFilter={onFilter}
-        filterDisplay="menu"
-        totalRecords={totalRecords}
-        first={first}
-        onPage={onPageChange}
-        onSort={(e: DataTableStateEvent) => onSort(e)}
-        sortField={sortField}
-        sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
-        loading={loading || isLoading}
-        loadingIcon="pi pi-spinner"
-        selection={selectedRecords}
-        onSelectionChange={onSelectionChange}
-        selectionMode="multiple"
-        removableSort
-      >
-
-        <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
+          <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
 
-        {renderColumnsDynamically(listViewMetaData)}
-        {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
-          <Column body={detailsBodyTemplate}></Column>
-        }
-        {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
-          solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
-            return (
-              <Column
-                key={rowAction}
-                body={(rowData) => (
-                  <a onClick={() => {
-                    setListRowActionData({
-                      modelName: params.modelName,
-                      moduleName: params.moduleName,
-                      rowAction: rowAction,
-                      rowData: rowData,
-                      closeListViewRowActionPopup: closeListViewRowActionPopup
-
-                    });
-                    setListViewRowActionPopupState(true)
-                  }
-                  }>
-                    <i className={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"} /> {/* PrimeIcons pencil icon */}
-                  </a>
-                )}
-              />
-            );
-          })}
-      </DataTable>
+          {renderColumnsDynamically(listViewMetaData)}
+          {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
+            <Column body={detailsBodyTemplate}></Column>
+          }
+          {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
+            solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
+              return (
+                <Column
+                  key={rowAction}
+                  body={(rowData) => (
+                    <a onClick={() => {
+                      setListRowActionData({
+                        modelName: params.modelName,
+                        moduleName: params.moduleName,
+                        rowAction: rowAction,
+                        rowData: rowData,
+                        closeListViewRowActionPopup: closeListViewRowActionPopup
+
+                      });
+                      setListViewRowActionPopupState(true)
+                    }
+                    }>
+                      <i className={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"} /> {/* PrimeIcons pencil icon */}
+                    </a>
+                  )}
+                />
+              );
+            })}
+        </DataTable>
+      </div>
       <Dialog
         visible={isDialogVisible}
         header="Confirm Delete"

package/src/components/core/list/SolidManyToOneFilterElement.tsx

@@ -1,8 +1,8 @@
-'use client';
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { InputTypes } from "./SolidVarInputsFilterElement"
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import qs from "qs";
 import { useState } from "react";
+import qs from "qs";
 
 
 export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
@@ -20,7 +20,7 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             limit: 10,
             filters: {
                 [fieldMetadata.relationModel.userKeyField.name]: {
-                    '$containsi': event.query
+                    $containsi: event.query
                 }
             }
         };

package/src/components/core/list/columns/SolidBooleanColumn.tsx

@@ -45,7 +45,7 @@ const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: So
             header={header}
             className="text-sm"
             sortable={column.attrs.sortable}
-            filter={filterable}
+            // filter={filterable}
             dataType={columnDataType}
             showFilterOperator={showFilterOperator}
             // filterMatchModeOptions={filterMatchModeOptions}

package/src/components/core/list/columns/SolidSelectionStaticColumn.tsx

@@ -39,7 +39,7 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             header={header}
             className="text-sm"
             sortable={column.attrs.sortable}
-            filter={filterable}
+            // filter={filterable}
             dataType={columnDataType}
             showFilterOperator={showFilterOperator}
             filterMatchModeOptions={filterMatchModeOptions}

package/src/components/core/list/columns/SolidShortTextColumn.tsx

@@ -5,7 +5,7 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 
-const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {    
     const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'text';
@@ -43,9 +43,9 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
-            filter={filterable}
+            // filter={filterable}
             dataType={columnDataType}
             showFilterOperator={showFilterOperator}
             filterMatchModeOptions={filterMatchModeOptions}
@@ -53,6 +53,11 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            // body={(data)=>{
+            //     console.log("DAta", data);
+                
+            //     return <div className="solid-table-row">{data.name}</div>
+            // }}
         ></Column>
     );