ibm-products
ibm-products copied to clipboard
feat(Datagrid): #2237 datagrid inline edit `date` type
Contributes to #2237
**The other two inline edit PRs should be reviewed first.
Adds the date type to Datagrid inline edit. This addition includes Carbon's DatePicker and DatePickerInput components. To add a column that uses date inline edit, it will look like the following:
{
Header: 'Active since',
accessor: 'activeSince',
inlineEdit: {
type: 'date',
// optionally pass props here to be passed through to Carbon's DatePicker component
onChange: (newDateObj, cell) => {
const formattedDate = formatDate(newDateObj);
updateCellDate(formattedDate, cell);
},
// optionally pass props here to be passed through to Carbon's DatePickerInput component
datePickerInputProps: {
labelText: 'Change active since date',
},
},
},
The onChange gives back the new date object (which the consumer will need to format on their own) and the cell object from the datagrid data. The new data will need to be updated by the consumer because it's required that the date be formatted in the dateFormat passed to DatePicker. I've included an example in the storybook doing so.
See interaction below:
https://user-images.githubusercontent.com/10215203/187295569-9530ea9f-c94d-4c7f-ac6e-7c2dd93bc8cd.mov
What did you change?
useInlineEdit.js
getInlineEditColumns.js
Datagrid.stories.js
_useInlineEdit.scss
makeData.js
How did you test and verify your work?
Storybook
Deploy Preview for carbon-for-ibm-products ready!
| Name | Link |
|---|---|
| Latest commit | caf74e3ed306595d95758809ecf1d1f7d390f757 |
| Latest deploy log | https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6320162964c3460008f05630 |
| Deploy Preview | https://deploy-preview-2238--carbon-for-ibm-products.netlify.app/ |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
@matthewgallo Noticed a small alignment issue while using the column resize in select type columns
https://user-images.githubusercontent.com/305492/189659155-57c8b1a1-a1d8-4885-a719-078a087bbe4c.mov