How to Handle Data Formatting in Retool

1// In a table column Value expression or a text component:
2{{ moment(currentRow.created_at).format('MMM D, YYYY') }}
3
4// Relative time (e.g. '3 days ago'):
5{{ moment(currentRow.updated_at).fromNow() }}
6
7// With timezone handling:
8{{ moment(currentRow.created_at).utc().local().format('MMM D, YYYY h:mm A') }}
9
10// ISO date to readable:
11{{ moment('2024-11-15T15:45:00Z').format('MMMM D, YYYY') }}
12
13// In a transformer:
14return data.map(row => ({
15  ...row,
16  createdFormatted: moment(row.created_at).format('MMM D, YYYY'),
17  updatedAgo: moment(row.updated_at).fromNow()
18}));

1// Currency formatting in a text component or column expression:
2{{ Number(currentRow.price).toLocaleString('en-US', {
3  style: 'currency',
4  currency: 'USD',
5  minimumFractionDigits: 2
6}) }}
7// Output: $1,234.56
8
9// Large number with commas:
10{{ Number(currentRow.revenue).toLocaleString('en-US') }}
11// Output: 1,234,567
12
13// Percentage:
14{{ (currentRow.conversion_rate * 100).toFixed(1) + '%' }}
15// Output: 12.5%
16
17// In a transformer for consistent app-wide formatting:
18return data.map(row => ({
19  ...row,
20  priceFormatted: Number(row.price).toLocaleString('en-US', {
21    style: 'currency', currency: 'USD'
22  }),
23  growthFormatted: (row.growth_rate >= 0 ? '+' : '') +
24    (row.growth_rate * 100).toFixed(1) + '%'
25}));

1// Format US phone number (10 digits) in a column expression:
2{{ currentRow.phone
3  ? currentRow.phone.replace(/^(\d{3})(\d{3})(\d{4})$/, '($1) $2-$3')
4  : 'N/A'
5}}
6// '5551234567' → '(555) 123-4567'
7
8// Format ZIP code (ensure 5 digits with leading zero):
9{{ String(currentRow.zip_code).padStart(5, '0') }}
10// 1234 → '01234'
11
12// Truncate long text:
13{{ currentRow.description?.length > 100
14  ? currentRow.description.slice(0, 100) + '...'
15  : currentRow.description ?? ''
16}}

1// Tag column 'Tag color' expression:
2{{
3  currentRow.status === 'active' ? 'green' :
4  currentRow.status === 'pending' ? 'yellow' :
5  currentRow.status === 'rejected' ? 'red' : 'gray'
6}}
7
8// Available tag colors: red, orange, yellow, green,
9// teal, blue, indigo, purple, pink, gray

1// Transformer: formattedData
2// Provides display-ready fields alongside raw values
3
4return (query1.data || []).map(row => ({
5  // Keep raw values for writes/calculations
6  ...row,
7
8  // Add formatted versions for display
9  price_display: Number(row.price).toLocaleString('en-US', {
10    style: 'currency', currency: 'USD'
11  }),
12  created_display: row.created_at
13    ? moment(row.created_at).format('MMM D, YYYY')
14    : 'Unknown',
15  updated_display: row.updated_at
16    ? moment(row.updated_at).fromNow()
17    : 'Never',
18  phone_display: row.phone
19    ? row.phone.replace(/^(\d{3})(\d{3})(\d{4})$/, '($1) $2-$3')
20    : 'N/A',
21  status_display: row.status
22    ? row.status.charAt(0).toUpperCase() + row.status.slice(1)
23    : 'Unknown',
24  growth_display: row.growth_rate != null
25    ? (row.growth_rate >= 0 ? '+' : '') +
26      (row.growth_rate * 100).toFixed(1) + '%'
27    : 'N/A'
28}));

1// Calculated column Value expression:
2{{ currentRow.is_verified ? 'Verified' : 'Unverified' }}
3
4// With emoji indicators:
5{{ currentRow.is_active ? '✓ Active' : '✗ Inactive' }}
6
7// Boolean column type in Inspector:
8// Set column type to 'Boolean' for a checkbox display
9// This renders true as a checked checkbox, false as unchecked
10
11// In a transformer for multiple booleans:
12return data.map(row => ({
13  ...row,
14  verifiedLabel: row.is_verified ? 'Verified' : 'Pending',
15  activeLabel: row.is_active ? 'Active' : 'Inactive',
16  emailConfirmedLabel: row.email_confirmed ? 'Confirmed' : 'Unconfirmed'
17}));