Table component: Added selected row and with checkbox example in Stor…

…ybook (#876) * feat: added selected row and with checkbox table example * docs: updated Changelog * docs: updated Changelog --------- Co-authored-by: Álvaro <alvaro@MacBook-Pro-de-CARTO.local>
CartoDB · Jun 7, 2024 · 43ea1f0 · 43ea1f0
1 parent 7d06e74
commit 43ea1f0
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Table component: Added selected row and with checkbox example in Storybook [#876](https://github.com/CartoDB/carto-react/pull/876)
+
 ## 3.0.0
 
 ### 3.0.0-alpha.10 (2024-06-03)

diff --git a/packages/react-ui/storybook/stories/molecules/Table.stories.js b/packages/react-ui/storybook/stories/molecules/Table.stories.js
@@ -13,7 +13,8 @@ import {
   IconButton,
   MenuItem,
   TableFooter,
-  TablePagination
+  TablePagination,
+  Checkbox
 } from '@mui/material';
 import SelectField from '../../../src/components/atoms/SelectField';
 import { MoreVertOutlined } from '@mui/icons-material';
@@ -47,7 +48,8 @@ const rows = [
     name: 'Test Data 5',
     type: 'string',
     mode: '',
-    description: 'Test Data 5'
+    description: 'Test Data 5 - Selected row',
+    selected: true
   }
 ];
 
@@ -92,7 +94,7 @@ const PlaygroundTemplate = (args) => {
         </TableHead>
         <TableBody>
           {rows.map((row, index) => (
-            <TableRow hover key={index}>
+            <TableRow hover key={index} selected={row.selected}>
               <TableCell component='th' scope='row'>
                 {index + 1}
               </TableCell>
@@ -327,6 +329,107 @@ const PaginationTemplate = (args) => {
   );
 };
 
+const CheckboxTemplate = (args) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <TableContainer>
+      <Table {...args} aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <Checkbox indeterminate />
+            </TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Type</TableCell>
+            <TableCell>Mode</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow hover key={index} selected={row.selected}>
+              <TableCell component='th' scope='row'>
+                <Checkbox checked={row.selected} />
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 1 ? (
+                  <Tooltip title={row.name}>
+                    <Typography variant='inherit' noWrap>
+                      {row.name}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.name
+                )}
+              </TableCell>
+              <TableCell>
+                <Chip size='small' color='default' label={row.type} />
+              </TableCell>
+              <TableCell>
+                <SelectField
+                  size='small'
+                  placeholder='Placeholder'
+                  onChange={() => void 0}
+                  value={[]}
+                >
+                  {[...Array(3)].map((item, index) => {
+                    const itemText = `${index + 1}`;
+
+                    return (
+                      <MenuItem key={index} value={itemText}>
+                        {itemText}
+                      </MenuItem>
+                    );
+                  })}
+                </SelectField>
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 3 ? (
+                  <Tooltip title={row.description}>
+                    <Typography variant='inherit' noWrap>
+                      {row.description}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.description
+                )}
+              </TableCell>
+              <TableCell padding='checkbox'>
+                <IconButton size='small'>
+                  <MoreVertOutlined />
+                </IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              count={100}
+              page={page}
+              onPageChange={handleChangePage}
+              rowsPerPage={rowsPerPage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
+};
+
 export const Playground = PlaygroundTemplate.bind({});
 Playground.args = {};
 
@@ -335,3 +438,6 @@ ScrollTemplate.args = {};
 
 export const WithPagination = PaginationTemplate.bind({});
 PaginationTemplate.args = {};
+
+export const WithCheckbox = CheckboxTemplate.bind({});
+CheckboxTemplate.args = {};