This skill provides comprehensive guidance for implementing data management features and realistic fake data generation using Faker.js in static HTML pages.

Faker.js Integration

CDN Setup

Always use Faker.js latest from CDN:

html

<script src="https://cdn.jsdelivr.net/npm/@faker-js/faker@8.3.1/dist/faker.min.js"></script>

Common Faker Methods

Personal Information:

javascript

faker.person.firstName()
faker.person.lastName()
faker.person.fullName()
faker.person.email()
faker.phone.number()
faker.date.birthdate()

Address & Location:

javascript

faker.address.streetAddress()
faker.address.city()
faker.address.country()
faker.address.zipCode()

Business Data:

javascript

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

Numbers & Dates:

javascript

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:

javascript

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

Text Content:

javascript

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

Internet & Tech:

javascript

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

Data Generation Best Practices

1. Seeding for Reproducible Data

javascript

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

2. Realistic Data Combinations

javascript

// 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

javascript

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

4. Realistic Ranges

javascript

// 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:

html

<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:

html

<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:

html

<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):

html

<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:

html

<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

javascript

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

javascript

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

javascript

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

html

<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>

javascript

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

Dashboard Stats Cards

javascript

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.