feat: Add changes for custom expand button

Author: anitta-keyvalue

src/App.tsx

@@ -421,6 +421,11 @@ const App: React.FC = () => {
     return <div>Custom Pagination </div>;
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const renderCustomExpandButton = () => {
+    return <div>➡</div>;
+  };
+
   return (
     <div className="app" style={{ backgroundColor: theme.colors?.background }}>
       <header

src/components/MultiLevelTable.tsx

@@ -42,6 +42,7 @@ interface MultiLevelTableProps {
   sortable?: boolean;
   ascendingIcon?: React.ReactNode;
   descendingIcon?: React.ReactNode;
+  expandIcon?: React.ReactNode;
 }
 
 /**
@@ -59,6 +60,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
   sortable = false,
   ascendingIcon,
   descendingIcon,
+  expandIcon,
 }) => {
   const mergedTheme = mergeThemeProps(defaultThemeProps, theme);
   const [filterInput, setFilterInput] = useState("");
@@ -184,6 +186,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
             onToggle={() => hasChildren && toggleRow(child.id)}
             level={level}
             theme={mergedTheme}
+            expandIcon={expandIcon}
           />
           {renderNestedRows(child.id, level + 1)}
         </React.Fragment>
@@ -216,6 +219,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
                   isExpanded={expandedRows.has(parentId)}
                   onToggle={() => hasChildren && toggleRow(parentId)}
                   theme={mergedTheme}
+                  expandIcon={expandIcon}
                 />
                 {renderNestedRows(parentId)}
               </React.Fragment>

src/components/TableCell.tsx

@@ -18,6 +18,7 @@ import '../styles/TableCell.css';
  * @property {() => void} onToggle - Function to toggle row expansion
  * @property {number} [paddingLeft=0] - Left padding for nested cells
  * @property {ThemeProps} theme - Theme properties
+ * @property {React.ReactNode} [expandIcon] - Custom expand icon
  */
 interface TableCellProps {
   cell: Cell<DataItem>;
@@ -26,6 +27,7 @@ interface TableCellProps {
   onToggle: () => void;
   paddingLeft?: number;
   theme: ThemeProps;
+  expandIcon?: React.ReactNode;
 }
 
 /**
@@ -40,7 +42,8 @@ export const TableCell: React.FC<TableCellProps> = ({
   isExpanded, 
   onToggle, 
   paddingLeft = 0,
-  theme 
+  theme,
+  expandIcon,
 }) => {
   const { key, ...cellProps } = cell.getCellProps();
 
@@ -76,7 +79,7 @@ export const TableCell: React.FC<TableCellProps> = ({
               alignItems: 'center',
             }}
           >
-            <ExpandIcon isExpanded={isExpanded} theme={theme} />
+            {expandIcon || <ExpandIcon isExpanded={isExpanded} theme={theme} />}
           </button>
         )}
         {cell.render('Cell')}

src/components/TableRow.tsx

@@ -19,6 +19,7 @@ import '../styles/TableRow.css';
  * @property {() => void} onToggle - Function to toggle row expansion
  * @property {number} [level=0] - Nesting level of the row
  * @property {ThemeProps} theme - Theme properties
+ * @property {React.ReactNode} [expandIcon] - Custom expand icon
  */
 interface TableRowProps {
   row: Row<DataItem> | DataItem;
@@ -28,6 +29,7 @@ interface TableRowProps {
   onToggle: () => void;
   level?: number;
   theme: ThemeProps;
+  expandIcon?: React.ReactNode;
 }
 
 /**
@@ -43,7 +45,8 @@ export const TableRow: React.FC<TableRowProps> = ({
   isExpanded, 
   onToggle, 
   level = 0,
-  theme 
+  theme,
+  expandIcon,
 }) => {
   const getRowClassName = () => {
     const classes = ['table-row'];
@@ -91,7 +94,7 @@ export const TableRow: React.FC<TableRowProps> = ({
                     }}
                     style={{ cursor: 'pointer', marginRight: '8px' }}
                   >
-                    <ExpandIcon isExpanded={isExpanded} theme={theme} />
+                    {expandIcon || <ExpandIcon isExpanded={isExpanded} theme={theme} />}
                   </span>
                 )}
                 {column.render 
@@ -125,6 +128,7 @@ export const TableRow: React.FC<TableRowProps> = ({
           onToggle={onToggle}
           paddingLeft={level > 0 ? 32 + (level * 16) : 0}
           theme={theme}
+          expandIcon={expandIcon}
         />
       ))}
     </tr>