diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
index dc859a55d..ebd611c1d 100644
--- a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
+++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
@@ -8,16 +8,20 @@ interface TableUpperProps {
   row? : number;
   rowSpan?: number;
   colSpan?: number;
+  visible?:boolean; 
 }
 
 const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
-  const maxRow = upHeadList.reduce((max, head) => Math.max(max, head.row || 0), 0);
+  const maxRow = upHeadList?.reduce((max, head) => Math.max(max, head.row || 0), 0);
+  //upHeadList.forEach((item) => item.visible ?item.visible:true)
 
   if(maxRow == 0){
     return (
       <>
         <TableRow className="bg-gray-50">
-          {upHeadList.map((head: TableUpperProps) => {
+          {upHeadList
+          .filter((item) => item.visible != false)
+          .map((head: TableUpperProps) => {
             return (
               <TableHead 
               key={head.id} 
@@ -38,7 +42,9 @@ const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
       <>
         {Array.from({ length: maxRow + 1 }, (_, rowIndex) => (
           <TableRow key={rowIndex+ " headerRow"} className="bg-gray-50">
-            {upHeadList.map((head: TableUpperProps) => {
+            {upHeadList
+            .filter((item) => item.visible != false)
+            .map((head: TableUpperProps) => {
               if (head.row === rowIndex) {
                 return (
                   <TableHead 
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 45748fb37..00fc376e6 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -20,6 +20,7 @@ type UiHeadProps = {
   id: string;
   title: string;
   align?: string;
+  visible?:boolean;
 }
 
 export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) {
@@ -58,7 +59,9 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
           <TableBody className='text-center'>
             {tableData.length > 0 ? tableData?.map((el: { [key: string]: any}, index) => (
               <TableRow key={`row-${index}`}>
-                {headlist?.map((head) => (
+                {headlist
+                .filter((item) => item.visible != false)
+                .map((head) => (
                   head.id && head.id.length > 1 && (
                     <TableCell 
                       className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${