In a vertically integrated steel and commodities manufacturing operation managing millions of tonnes of inventory, production schedules, and trading data across multiple facilities in India and beyond, the ability to visualize, filter, and interact with complex datasets in real time is mission-critical. Minera Group, handling raw materials (iron ore pellets, coal, bauxite), production metrics, and finished steel products, required enterprise-grade data table interfaces that balanced sophisticated functionality with intuitive usability – all optimized for field operations, office dashboards, and mobile access.
Key Tools & Technologies:
HTML5
CSS3 & SLDS
Responsive Mobile Design
My Role & Scope
Served as LWC Developer & Architect, UI Component Designer, Mobile-First Optimization Specialist, and QA & Accessibility Lead over a 2-month project lifecycle.
The scope encompassed designing bespoke custom table layouts (headers, rows, cells), engineering dynamic input fields with conditional rendering logic, crafting custom button components and controls, tuning table height and scroll performance, establishing mobile responsiveness via horizontal scroll implementations, and building cell-level conditional input logic.
The Challenge
Minera’s data-heavy operations required displaying massive datasets – production orders, inventory allocations, shipment tracking, quality metrics – in interfaces that users on the shop floor could navigate as easily as office-based analysts.
The standard SLDS data table component, while robust, didn’t meet Minera’s specific needs: custom row styling for priority-flagging, conditional inline editing for production adjustments, and fluid mobile responsiveness for warehouse teams accessing dashboards on tablets.
The core complexity was building a fully custom table system from scratch – headers, row structures, cells, and input fields – without relying on pre-built Salesforce components, ensuring pixel-perfect design consistency and meeting exacting performance requirements for datasets with hundreds to thousands of rows.
Research & Design Process
Conducted detailed workflow analysis across key user segments: Shop Floor Operators (quick visibility into production batch data and real-time status updates), Office Analysts (sorting, filtering, and export capabilities for reporting), and Mobile Users (warehouse staff accessing inventory data on tablets during shift work).
Custom button styling boosted action discoverability compared to generic SLDS buttons. While 80% of users accessed tables on desktop, the 20% on mobile required a seamless experience. Horizontal scroll was preferred over column hiding for warehouse staff due to muscle memory from legacy systems. Height-constrained tables improved cognitive load, allowing users to parse 10-15 rows at a time without endless scrolling fatigue.
Design & Development Iterations
Mapped complex table requirements into modular, reusable LWC components. Designed data models for columns, rows, and cell configurations, while establishing responsive breakpoints and scroll strategies.
Built base table structures using Flexbox for flexible column width distribution. Implemented fixed headers with independently scrollable bodies, and crafted custom button and input field styles.
Engineered cell-level conditional rendering logic and integrated Apex controllers for efficient data fetching and row-level actions. Added real-time validation and error handling.
Tested across iOS Safari, Chrome for Android, and desktop environments. Optimized horizontal scroll UX with touch-friendly controls and adjusted font sizing/spacing for smaller viewports.
Implemented keyboard navigation support (Tab cell navigation, Enter key actions), added ARIA labels for screen readers, conducted performance testing with 500-1000 row datasets, and verified cross-browser compatibility.
Key Outcomes & Technical Retrospective
Performance Impact: Successfully rendered 1000-row tables in under 2 seconds with smooth scrolling and zero jank. Warehouse teams completed inventory checks 30% faster using the mobile view, achieving a 95% task completion rate for inline edits.
Utilized CSS Grid and Flexbox for column management, CSS Variables for dynamic theming, Media Queries for breakpoint layouts, CSS Transitions for state changes, and calc() functions for viewport-based dynamic sizing.
This project reinforced the importance of designing from first principles when off-the-shelf components don’t fit the bill. Building custom table infrastructure provided deep insights into responsive web design, performance optimization, and mobile-first UX for data-heavy applications. Designing for mobile constraints first led to cleaner, more maintainable code, while conditional rendering and fixed heights drastically reduced user cognitive load.
