ABC Price Optimisation Web App - Dynamic Table Component

Challenge Objectives

• Build an Angular 8 table component that supports dynamic data (i.e. with dynamic number of columns and rows).

 
Project Background

• Our client who is a worldwide IT company would like to modernise the UI of one of its internal web applications, which is a price optimization tool. They are satisfied with the flow and the interaction within the current app, so they would like to keep those and would like to have a more modern style for the UI.
• The application is used to support price management through several functions and has many modules.
• The application contains many complicated tables which mostly consumes dynamic data.

 
Technology Stack

• Angular 8
• HTML5
• Javascript
• CSS
• Bootstrap (optional)

 
Challenge Requirements
For this challenge, we don’t have a design to follow. The purpose is to create a reusable table component with the following features:

• The table itself must work with dynamic data, which means columns are not fixed but are coming from the json data. It should be able to display all columns coming from the data.
• It must be possible to configure the table such that certain columns are fixed to the left side and not scrollable horizontally.
• It must be possible to select on the UI which columns to show or hide (except for the ones configured to be fixed).
• The table must support multi-column sorting by pressing Ctrl when clicking on a column header. And a number should appear in the column header to indicate the order of the columns that were clicked. For example: suppose user clicks columns Name, Age and Gender in order while pressing Ctrl, the table is first sorted by Name, then by Age and finally by Gender. And the column headers will be shown as “Name 1”, “Age 2”, “Gender 3” incating the order these headers were clicked.
• The table needs to support an optional leftmost column (that can be turned on or off) with controls in it so that users can perform actions such as checking the row, delete the row, edit the row, or popup a context menu.
• The JSON data could also indicate which columns are used for filtering, and the component should be able to interpret the data and dynamically create the necessary controls above the table to perform filtering.
• The table should support pagination.
• It needs to be easy to add styling to the table.
• Such table will be used in different parts of the application, so it needs to be easy to configure and reuse it.
• Please provide a few demo pages showing different usages of the component (with filter, without filter, with fixed columns, without fixed columns, etc…)
• Make sure you provide clear instructions on how to use the component in an existing Angular application.
• No linting errors and no errors with production builds.

 
General Requirements

• Minimum supported width should be 1366px
• Must use Angular 8
• The main content should have fluid width to fill all the available space
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application
• Show loading spinners when populating data from API / local JSON to UI

 
HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 
Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code
• Use typescript and linter for code quality

 
Licenses & Attribution

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online

 
Browser Requirements

• Windows: IE 11+, Chrome Latest
• Mac: Safari Latest, Chrome Latest

 

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.