feat: add time and datetime formatter

apps/studio/components/grid/components/formatter/DateTimeFormatter.tsx

@@ -0,0 +1,26 @@
+import { SupaColumn, SupaRow } from 'components/grid/types'
+import { RenderCellProps } from 'react-data-grid'
+import { NullValue } from '../common/NullValue'
+import { EmptyValue } from '../common/EmptyValue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+export const DateTimeFormatter = (
+ p: React.PropsWithChildren<RenderCellProps<SupaRow, unknown>> & { columnDef: SupaColumn }
+) => {
+ let value = p.row[p.column.key]
+ if (value === null) return <NullValue />
+ if (value === '') return <EmptyValue />
+
+ const INPUT_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
+
+ const OUTPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+
+ if (p.columnDef.format.endsWith('z')) {
+ return dayjs(value, INPUT_FORMAT).format(OUTPUT_FORMAT)
+ } else {
+ return value
+ }
+}

apps/studio/components/grid/components/formatter/TimeFormatter.tsx

@@ -0,0 +1,26 @@
+import { SupaColumn, SupaRow } from 'components/grid/types'
+import { RenderCellProps } from 'react-data-grid'
+import { NullValue } from '../common/NullValue'
+import { EmptyValue } from '../common/EmptyValue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+export const TimeFormatter = (
+ p: React.PropsWithChildren<RenderCellProps<SupaRow, unknown>> & { columnDef: SupaColumn }
+) => {
+ let value = p.row[p.column.key]
+ if (value === null) return <NullValue />
+ if (value === '') return <EmptyValue />
+
+ const INPUT_FORMAT = 'HH:mm:ssZZ'
+
+ const OUTPUT_FORMAT = 'HH:mm:ss'
+
+ if (p.columnDef.format.endsWith('z')) {
+ return dayjs(value, INPUT_FORMAT).format(OUTPUT_FORMAT)
+ } else {
+ return value
+ }
+}

apps/studio/components/grid/utils/gridColumns.tsx

@@ -13,6 +13,8 @@ import { BooleanFormatter } from '../components/formatter/BooleanFormatter'
 import { DefaultFormatter } from '../components/formatter/DefaultFormatter'
 import { ForeignKeyFormatter } from '../components/formatter/ForeignKeyFormatter'
 import { JsonFormatter } from '../components/formatter/JsonFormatter'
+import { TimeFormatter } from '../components/formatter/TimeFormatter'
+import { DateTimeFormatter } from '../components/formatter/DateTimeFormatter'
 import { AddColumn } from '../components/grid/AddColumn'
 import { ColumnHeader } from '../components/grid/ColumnHeader'
 import { SelectColumn } from '../components/grid/SelectColumn'
@@ -206,6 +208,12 @@ function getCellRenderer(
  case 'json': {
  return JsonFormatter
  }
+ case 'time': {
+ return (p: any) => <TimeFormatter {...p} columnDef={columnDef} />
+ }
+ case 'datetime': {
+ return (p: any) => <DateTimeFormatter {...p} columnDef={columnDef} />
+ }
  default: {
  return DefaultFormatter
  }