How Lodash startCase Formats Strings for UI Headers

This article explains how the _.startCase function in the Lodash JavaScript library transforms diverse string inputs into clean, title-cased UI display headers. It covers the underlying conversion mechanism, demonstrates transformations across standard naming conventions like camelCase, snake_case, and kebab-case, and highlights practical front-end use cases such as dynamically generating table column headers and form labels.

The Conversion Mechanism

The _.startCase method takes an input string and standardizes it into words separated by spaces, where the first letter of each word is capitalized.

Under the hood, Lodash executes a two-step process:

  1. Compound Word Splitting: The function parses the input string using word-boundary logic. It identifies delimiters such as hyphens (-), underscores (_), spaces, and shifts between lowercase and uppercase letters (e.g., from foo to Bar in fooBar).
  2. Capitalization and Joining: Each extracted word segment has its first letter converted to uppercase while retaining or normalizing subsequent letters, and the words are joined together using a single standard space.

Transformation Examples

In UI development, backend APIs often return data with keys formatted in conventions that are not visually appealing to end users. _.startCase normalizes these conventions into presentation-ready text:

import _ from 'lodash';

// camelCase
_.startCase('firstName'); 
// => 'First Name'

// snake_case
_.startCase('order_tracking_number'); 
// => 'Order Tracking Number'

// kebab-case
_.startCase('user-profile-settings'); 
// => 'User Profile Settings'

// Mixed spaces and delimiters
_.startCase('__contact_email--address__'); 
// => 'Contact Email Address'

Common UI Use Cases

1. Dynamic Data Tables

When rendering tables with dynamic schemas, hardcoding column labels is impractical. By passing the data keys to _.startCase, headers can be generated automatically:

const userRecord = {
  first_name: 'Jane',
  last_name: 'Doe',
  account_created_at: '2023-10-12'
};

const headers = Object.keys(userRecord).map(key => _.startCase(key));
// Result: ['First Name', 'Last Name', 'Account Created At']

2. Automatic Form Labels

Forms generated from metadata, database schemas, or validation objects (such as form field errors) can use _.startCase to convert identifiers into readable label tags above input controls without manual mapping objects.

Important Considerations

While _.startCase works well for standard text, developers should be aware of how it handles abbreviations and acronyms: