fix: fix header checkbox logic and other minor fixes

packages/lsd-react/src/components/Table/Table.stories.tsx

@@ -27,18 +27,16 @@ export default {
   },
 } as Meta
 
-const content = (
+const itemContentArray = [
-  <TableRow>
+  'Content 1',
-    <TableItem>Content 1</TableItem>
+  'Content 2',
-    <TableItem>Content 2</TableItem>
+  'Content 3',
-    <TableItem>Content 3</TableItem>
+  'Content 4',
-    <TableItem>Content 4</TableItem>
+  'Content 5',
-    <TableItem>Content 5</TableItem>
+  'Content 6',
-    <TableItem>Content 6</TableItem>
+  'Content 7',
-    <TableItem>Content 7</TableItem>
+  'Content 8',
-    <TableItem>Content 8</TableItem>
+]
-  </TableRow>
-)
 
 const header = (
   <div
@@ -65,17 +63,42 @@ const headerOptions = new Array(8).fill(null).map((value, index) => ({
 export const Root: Story<TableProps> = ({ type, pages, ...args }) => {
   const [rows, setRows] = useState(1)
   const [footerContent, setFooterContent] = useState('Footer content goes here')
-
+  const [allChecked, setAllChecked] = useState(false)
+  const [rowsChecked, setRowsChecked] = useState(Array(rows).fill(false))
   const onPageChange = (page: number) => {
     setFooterContent(`Page ${page} of ${pages}`)
   }
 
+  const handleHeaderCheckboxChange = () => {
+    const newAllChecked = !allChecked
+    setAllChecked(newAllChecked)
+    // Update all rows based on the header checkbox.
+    setRowsChecked(Array(rows).fill(newAllChecked))
+  }
+
+  const handleRowCheckboxChange = (index: number) => {
+    const updatedRowsChecked = [...rowsChecked]
+    updatedRowsChecked[index] = !updatedRowsChecked[index]
+    setRowsChecked(updatedRowsChecked)
+
+    // Check if all rows are selected or if any row is unchecked
+    if (updatedRowsChecked.every((val) => val)) {
+      setAllChecked(true)
+    } else {
+      setAllChecked(false)
+    }
+  }
+
   const toolbar = (
     <>
       <Dropdown
         size="medium"
         options={dropdownOptions}
         value={dropdownOptions[0].value}
+        style={{
+          width: 'auto',
+          minWidth: '113px',
+        }}
       />
       <div
         style={{
@@ -124,14 +147,29 @@ export const Root: Story<TableProps> = ({ type, pages, ...args }) => {
         {...args}
         onPageChange={onPageChange}
       >
-        <TableRow>
+        <TableRow
-          {headerOptions.map((item) => (
+          onSelectChange={handleHeaderCheckboxChange}
-            <TableItem>{item.name}</TableItem>
+          checked={allChecked}
+        >
+          {headerOptions.map((item, index) => (
+            <TableItem key={index}>{item.name}</TableItem>
           ))}
         </TableRow>
         {Array(rows)
           .fill(true)
-          .map(() => content)}
+          .map((row, rowIndex) => (
+            <TableRow
+              checked={rowsChecked[rowIndex]}
+              onSelectChange={() => handleRowCheckboxChange(rowIndex)}
+              key={rowIndex}
+            >
+              {itemContentArray.map((itemContent, itemIndex) => (
+                <TableItem key={`${rowIndex}-${itemIndex}`}>
+                  {itemContent}
+                </TableItem>
+              ))}
+            </TableRow>
+          ))}
       </Table>
     </div>
   )

packages/lsd-react/src/components/TableFooter/TableFooter.tsx

@@ -81,7 +81,7 @@ export const TableFooter: React.FC<TableFooterProps> & {
             size={size}
             onClick={() => dispatch({ type: 'DECREMENT_PAGE' })}
           >
-            <NavigateBeforeIcon />
+            <NavigateBeforeIcon color="primary" />
           </IconButton>
           <Dropdown
             {...commonProps}
@@ -96,7 +96,7 @@ export const TableFooter: React.FC<TableFooterProps> & {
             size={size}
             onClick={() => dispatch({ type: 'INCREMENT_PAGE' })}
           >
-            <NavigateNextIcon />
+            <NavigateNextIcon color="primary" />
           </IconButton>
         </div>
       )}

packages/lsd-react/src/components/TableRow/TableRow.tsx

@@ -15,6 +15,9 @@ export type TableRowProps = CommonProps &
   React.HTMLAttributes<HTMLDivElement> & {
     size?: 'large' | 'medium' | 'small'
     type?: 'default' | 'checkbox' | 'radio'
+    onSelectChange?: (rowId?: string) => void
+    rowId?: string
+    checked?: boolean
   }
 
 export const TableRow: React.FC<TableRowProps> & {
@@ -23,12 +26,31 @@ export const TableRow: React.FC<TableRowProps> & {
   size: _size = 'large',
   type: _type = 'default',
   children,
+  onSelectChange,
+  rowId,
+  checked: isCheckedProp,
   ...props
 }) => {
   const commonProps = useCommonProps(props)
   const table = useTableContext()
   const type = table?.type ?? _type
 
+  // State for uncontrolled component behavior
+  const [isChecked, setIsChecked] = React.useState(false)
+  const isControlled = isCheckedProp !== undefined
+
+  // Set internal state here, if the component is controlled.
+  if (isControlled && isCheckedProp != isChecked) setIsChecked(isCheckedProp)
+
+  const handleCheckboxChange = () => {
+    if (!isControlled) {
+      // Only toggle the internal state if it's an uncontrolled component
+      setIsChecked(!isChecked)
+    }
+
+    onSelectChange && onSelectChange(rowId)
+  }
+
   return (
     <tr
       {...omitCommonProps(props)}
@@ -40,12 +62,16 @@ export const TableRow: React.FC<TableRowProps> & {
     >
       {type === 'checkbox' && (
         <td className={tableItemClasses.root}>
-          <Checkbox />
+          <Checkbox checked={isChecked} onChange={handleCheckboxChange} />
         </td>
       )}
       {type === 'radio' && (
         <td className={tableItemClasses.root}>
-          <RadioButton value="1" />
+          <RadioButton
+            value="1"
+            checked={isChecked}
+            onChange={handleCheckboxChange}
+          />
         </td>
       )}
       {children}