mi6
Provide a "datetime" type for data table cells
Summary
Update the cell / column types on the data table component to provide a "datetime" type.
💬 Description
We currently provide a "date" type for data table cells but no "datetime" type.
If you pass an ISO date-time string to a "date" cell, it just displays the date and not the time - which can be seen in this StackBlitz. It is possible to just use the "string" type but this causes the data to be aligned to the left, which isn't consistent with how "date" cells are displayed, so we need another type: "datetime".
It should probably work the same way as the "date" type - so, I could provide a date in a simple format, like "01/02/2024 10:30:30", or an ISO string like "2024-02-01T10:30:30Z". And it would just be displayed in the simple "dd/mm/yyyy hh:mm:ss" format.
💰 User value
This would allow date-time values to be displayed in a data table, and in a way which matches the alignment of the "date" cell.
In Figma, date cell can have a number of different date formats applied.
Design work would be to create a small set of different time format atoms (as per date) and either;
- modify existing date cell to optionally include time - allowing designer to select desired time format or
- duplicate date cell design into datetime cell and make same modifications as per option 1
Changes made to data table design file as follows;
- created new atom; Atoms/Time formats/HHMISS based on Atoms/Date formats/DDMMYYYY
- renamed properties from Day, Month, Year to Hours, Minutes and Seconds
- replaced '/' separator with ':'
- added property Show seconds and applied to last separator and seconds property ...providing ability to hide seconds value from time display
For the time being, we'll stick with one time format but has been designed so it could be extended in future if needed.
modified Atoms/Cell data/Date;
- added instance pick property called Time format, pointing to the newly created atom Atoms/Time formats/HHMISS
- added boolean property called Show date, default=true if set to false it would hide the date element of this cell type
- added boolean property called Show time, default=false if set to true it would display the time element of this cell type
For each cell;
- created autolayout called datetime around existing date atom
- applied Show date boolean property to date atom
- added instance of time atom into new datetime frame - ensuring that text format matches that of the existing date atom
- applied Show time boolean property to newly added time atom
- modified autolayout format of datetime frame, set to horizontal layout with 8px padding between elements
This could be extended further (if requested) to cover addition of trailing 'Z' or time zone code. Not for this ticket at the moment.
Changes made to Figma branch ready for development
Presented at Design review, agreed that time format placeholder text should be HH:MM:SS to be consistent with time input component.
If time input is altered in the future to include milliseconds, this aspect of data table should be amended also to include display of MMS
Moved this ticket to the "no status" column as it needs a milestone and priority
Test / ensure that the datetime type can be displayed as a link as well