diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b1871523..bc2233e64 100644 --- 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 index 842fd841c..9df85826d 100644 --- 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) => { {rows.map((row, index) => ( - + {index + 1} @@ -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 ( + + + + + + + + Name + Type + Mode + Description + Actions + + + + {rows.map((row, index) => ( + + + + + + {index === 1 ? ( + + + {row.name} + + + ) : ( + row.name + )} + + + + + + void 0} + value={[]} + > + {[...Array(3)].map((item, index) => { + const itemText = `${index + 1}`; + + return ( + + {itemText} + + ); + })} + + + + {index === 3 ? ( + + + {row.description} + + + ) : ( + row.description + )} + + + + + + + + ))} + + + + + + +
+
+ ); +}; + 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 = {};