Data Features With Faker

Business Data:

faker.company.name()
faker.company.catchPhrase()
faker.commerce.productName()
faker.commerce.productDescription()
faker.commerce.price()
faker.commerce.department()

Numbers & Dates:

faker.number.int({ min: 0, max: 100 })
faker.number.float({ min: 0, max: 100, precision: 0.01 })
faker.date.past()
faker.date.future()
faker.date.recent()

Images:

faker.image.avatar()
faker.image.url()
faker.image.urlLoremFlickr({ category: 'technology' })

Text Content:

faker.lorem.sentence()
faker.lorem.paragraph()
faker.lorem.paragraphs(3)
faker.lorem.words(5)

Internet & Tech:

faker.internet.email()
faker.internet.url()
faker.internet.domainName()
faker.internet.userName()
faker.internet.color()

Data Generation Best Practices

1. Seeding for Reproducible Data

faker.seed(12345); // Always generates same data

2. Realistic Data Combinations

// Good: Combine multiple fields
const user = {
    name: faker.person.fullName(),
    email: faker.internet.email(),
    city: faker.address.city(),
    company: faker.company.name()
};

// Avoid: Disconnected random data without context

3. Locale Support

// Set locale for region-specific data
faker.locale = 'tr'; // Turkish
faker.locale = 'en'; // English
faker.locale = 'de'; // German

4. Realistic Ranges

// Good: Contextual ranges
const price = faker.datatype.number({ min: 10, max: 1000 });
const stock = faker.datatype.number({ min: 0, max: 500 });
const rating = (Math.random() * 2 + 3).toFixed(1); // 3.0-5.0

// Avoid: Unrealistic ranges like prices 0-1000000

Search Functionality

Search Bar Component

Top-Right Navbar Search:

<form class="d-flex ms-auto me-3" role="search">
    <input class="form-control form-control-sm" 
           type="search" 
           placeholder="Search..." 
           aria-label="Search"
           id="searchInput"
           style="width: 250px;">
    <button class="btn btn-sm btn-outline-light ms-2" type="submit">
        <i class="fas fa-search"></i>
    </button>
</form>

Implementation Note: Search functionality is design-only (visual representation). For static pages, no actual filtering occurs unless JavaScript implementation is added separately.

Sorting & Filtering

Controls Placement

Place sorting and filtering dropdowns above the data table/grid:

<div class="row mb-3 g-2">
    <div class="col-auto">
        <select class="form-select form-select-sm" id="sortBy">
            <option value="">Sort by...</option>
            <option value="name-asc">Name (A-Z)</option>
            <option value="name-desc">Name (Z-A)</option>
            <option value="date-newest">Date (Newest)</option>
            <option value="date-oldest">Date (Oldest)</option>
            <option value="price-low">Price (Low to High)</option>
            <option value="price-high">Price (High to Low)</option>
        </select>
    </div>
    
    <div class="col-auto">
        <select class="form-select form-select-sm" id="filterBy">
            <option value="">Filter by...</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
            <option value="pending">Pending</option>
        </select>
    </div>
    
    <div class="col-auto">
        <select class="form-select form-select-sm" id="categoryFilter">
            <option value="">All Categories</option>
            <option value="electronics">Electronics</option>
            <option value="clothing">Clothing</option>
            <option value="food">Food</option>
        </select>
    </div>
    
    <div class="col-auto ms-auto">
        <button class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-redo me-1"></i>Reset
        </button>
    </div>
</div>

Common Sort Options

For User/Contact Lists:

• Name (A-Z / Z-A)
• Date Added (Newest / Oldest)
• Last Modified
• Status

For Product Lists:

• Name (A-Z / Z-A)
• Price (Low to High / High to Low)
• Rating (Highest / Lowest)
• Stock (Most / Least)

For Transaction/Order Lists:

• Date (Newest / Oldest)
• Amount (Highest / Lowest)
• Status
• Customer Name

Common Filter Options

Status Filters:

• Active / Inactive
• Completed / Pending / In Progress
• Published / Draft
• Available / Out of Stock

Category Filters:

• By department/category
• By type/kind
• By priority level
• By assigned user/team

Pagination

Pagination Component

Place at the bottom of data lists/tables:

<nav aria-label="Page navigation" class="d-flex justify-content-between align-items-center mt-4">
    <small class="text-muted">
        Showing <strong>1</strong> to <strong>10</strong> of <strong>85</strong> results
    </small>
    <ul class="pagination mb-0">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">
                <i class="fas fa-chevron-left me-1"></i>Previous
            </a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">...</a></li>
        <li class="page-item"><a class="page-link" href="#">10</a></li>
        <li class="page-item">
            <a class="page-link" href="#">
                Next<i class="fas fa-chevron-right ms-1"></i>
            </a>
        </li>
    </ul>
</nav>

Pagination Variations

Compact (Mobile-Friendly):

<ul class="pagination mb-0">
    <li class="page-item"><a class="page-link" href="#">«</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>

With Page Info:

<div class="d-flex justify-content-between align-items-center">
    <span class="text-muted">Page 2 of 15</span>
    <ul class="pagination mb-0">
        <!-- pagination items -->
    </ul>
</div>

Data Display Patterns

Table Pattern with Faker Data

function generateTableData() {
    const tableBody = document.getElementById('tableBody');
    
    for (let i = 0; i < 20; i++) {
        const row = `
            <tr>
                <td>#${String(i + 1).padStart(3, '0')}</td>
                <td>${faker.person.fullName()}</td>
                <td>${faker.internet.email()}</td>
                <td>${faker.phone.number()}</td>
                <td>${faker.company.name()}</td>
                <td>
                    <span class="badge bg-success">Active</span>
                </td>
            </tr>
        `;
        tableBody.innerHTML += row;
    }
}

Card Grid Pattern with Faker Data

function generateCards() {
    const grid = document.getElementById('cardGrid');
    
    for (let i = 0; i < 12; i++) {
        const price = faker.datatype.number({ min: 50, max: 1000 });
        
        const card = `
            <div class="col-md-4 col-lg-3">
                <div class="card h-100">
                    <img src="${faker.image.url()}" 
                         class="card-img-top" 
                         alt="Product"
                         loading="lazy"
                         decoding="async">
                    <div class="card-body">
                        <h5 class="card-title">${faker.commerce.productName()}</h5>
                        <p class="card-text">${faker.commerce.productDescription().substring(0, 80)}...</p>
                        <p class="text-primary fw-bold">$${price}</p>
                    </div>
                </div>
            </div>
        `;
        grid.innerHTML += card;
    }
}

Status Badges with Dynamic Data

const statuses = [
    { text: 'Active', class: 'success' },
    { text: 'Inactive', class: 'secondary' },
    { text: 'Pending', class: 'warning' },
    { text: 'Error', class: 'danger' }
];

const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];

const badge = `
    <span class="badge bg-${randomStatus.class}">
        <i class="fas fa-circle me-1" style="font-size: 0.5rem;"></i>
        ${randomStatus.text}
    </span>
`;

Data Count & Statistics

Status Bar with Dynamic Counts

<footer class="bg-dark text-light py-3">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6">
                <small>
                    <i class="fas fa-circle text-success me-2" style="font-size: 0.5rem;"></i>
                    System operational • <strong id="recordCount">250</strong> records loaded
                </small>
            </div>
        </div>
    </div>
</footer>

// Update record count dynamically
document.getElementById('recordCount').textContent = totalRecords;

Dashboard Stats Cards

function generateStatsCards() {
    return `
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h6>Total Users</h6>
                    <h2>${faker.datatype.number({ min: 1000, max: 10000 })}</h2>
                </div>
            </div>
        </div>
    `;
}

Implementation Checklist

When implementing data features with Faker.js:

• ✅ Include Faker.js CDN in page
• ✅ Set appropriate locale if needed
• ✅ Generate realistic data ranges
• ✅ Include search bar (design-only)
• ✅ Add sorting dropdown above data
• ✅ Add filtering dropdown(s) above data
• ✅ Add category filter if applicable
• ✅ Include pagination at bottom
• ✅ Show record counts in pagination
• ✅ Display total records in status bar
• ✅ Use appropriate status badges
• ✅ Initialize data on page load
• ✅ Combine related Faker methods for realistic data

Best Practices

Data Generation:

• Generate 10-20 records for tables
• Generate 8-12 items for card grids
• Generate 5-10 items for dashboard lists
• Use consistent data structure across items

Performance:

• Generate data once on page load
• Avoid regenerating data on every interaction
• Use lazy loading for images
• Keep total records reasonable (<100 for static pages)

UX:

• Show loading states where appropriate
• Display "No results" message when applicable
• Keep filters mutually exclusive when sensible
• Reset filters should clear all selections

Remember: All data features (search, sort, filter, pagination) are design-only in static pages. They provide a complete, professional appearance without requiring backend functionality. Focus on generating realistic, contextually appropriate fake data that tells a coherent story.