feat: Implement range selection in list view and grid view ✨

lethemanh · rezk2ll · commit a9274f2599c9 · 2025-08-28T16:32:16.000+02:00
diff --git a/react/Table/Readme.md b/react/Table/Readme.md
@@ -103,7 +103,13 @@ const initialVariants = [{ grouped: false }]
 
 const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1,12] })
 
-;
+/**
+ * @param order
+ * @param orderBy
+ */
+const onSortChange = ({ order, orderBy }) => {
+  setState({ order, orderBy })
+}
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
@@ -117,6 +123,7 @@ const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1
         isSelectedItem={row => isSelectedItem(row)}
         onSelect={onSelect}
         onSelectAll={onSelectAll}
+        onSortChange={onSortChange}
         componentsProps={{
           rowContent: {
             onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) },
diff --git a/react/Table/Virtualized/RowContent.jsx b/react/Table/Virtualized/RowContent.jsx
@@ -30,7 +30,7 @@ const RowContent = ({
             'aria-labelledby': `enhanced-table-checkbox-${index}`
           }}
           size="small"
-          onChange={() => onSelectClick(row)}
+          onClick={event => onSelectClick(event, row, index)}
         />
       </TableCell>
       {columns.map(column => (
diff --git a/react/Table/Virtualized/index.jsx b/react/Table/Virtualized/index.jsx
@@ -23,6 +23,7 @@ const VirtualizedTable = forwardRef(
       componentsProps,
       context,
       components,
+      onSortChange,
       ...props
     },
     ref
@@ -43,8 +44,10 @@ const VirtualizedTable = forwardRef(
 
     const handleSort = property => {
       const isAsc = orderBy === property && order === 'asc'
-      setOrder(isAsc ? 'desc' : 'asc')
+      const newOrder = isAsc ? 'desc' : 'asc'
+      setOrder(newOrder)
       setOrderBy(property)
+      onSortChange({ order: newOrder, orderBy: property })
     }
 
     const handleSelectAll = event => {
