Challenge Overview
Welcome to ReactJS Editable Grid Component Challenge
We have an internal website, that has several tables, that display dynamic data.
The tables have large number of columns (around 100+) and large number of rows 10000+.
We need a component that easily allows us to switch the current table(s) with a React Component.
We would like to build a wrapper around the component (let’s call new component ReactGrid) which allows using the React-virtualized component in a developer friendly way.
The wrapper component should be able to read all configuration via JSON and adjust itself based on json settings.
React Grid should support the following configuration options & runtime options.
Configuration Options:
Pagination
- Page Size
-- Number of records to show on a page
- Allow Paging
-- If set to true, the component should display pager controls and adjust records page.
-- Setting it to false, should display all records
- Page Control location
-- Left, Right, Top Bottom
- Pager CSS Classes :
-- CSS classes to be applied to pagination controls
- Allow Custom Paging
-- Allow client code to load the records per page. Client will set number of pages.
-- The client load just the data shown on current page. Control will pass page changed event / callback.
Sorting
- Allow sorting
- If set to true, user should be able to sort the grid by clicking on header, Clicking twice should toggle the sort.
Read Only
- If set to true, show data as read only
- If set to false, display editable rows should be displayed.
- Grid should display Save button and Cancel, that allows user to save data back to Values records.
Values
- The array of JSON records, that needs to displayed
Freeze
- Allow Freezing
- Freeze Rows
- Freeze Rows from Top
- Freeze Columns
Please note this feature should during runtime as well. A user should be able to freeze columns and rows (similar to excel) (via right click menu on grid header or some way similar, please check the run time option)
Columns Array
- Accept a list of “Columns” to be displayed
- A column could have following properties
-- Field - Field from Values Array that needs to be displayed
-- Alignment: Left / Right / Center
-- Header Text : By default Field value,
-- Header Alignment : Left / Right / Center
-- Edit Item Template : Default <input type=”text” /> display the current value
-- Please note the Developer should be able to configure the template to be used, it could be a checkbox, combobox etc
-- Read Only : Make this column readonly
-- Visible : true / false
-- Footer Text :
-- Column Class : “any custom CSS class to be applied to this column”
-- Footer Style : CSS Classes
UI
- Background color to be applied to the ReactGrid.
- Border Style (Border Color, Border Width etc)
- CSS Style to be applied to the entire Grid (Font, Font Size, Color etc)
- Cellspacing
- Cellpadding
- Gridlines: true / false
- Auto resize
Runtime options
- These features should be available to end user interacting with the grid
- Allow Drag and Drop of Columns. If set to true, user should be allowed to drag and drop columns in the Tables
- Allow Freezing of Rows / Columns . This functionality should be similar to excel . User should be able to freeze rows or columns or both.
Please feel free to add attributes or values, as make sense. Please assume defaults wherever feasible.
A Normal Use Case
- Developer will query data from an API
- Configure the Grid to display columns, and other configuration
- Pass the Data from API as values to be displayed on the Grid
- User can freeze columns or rows at runtime similar to Excel.
- User can drag and drop and arrange columns as per wish.
Submission
- Please showcase your component in a html page.
- You can display mock data in the showcase. e.g. an address book or table of books showing author, name, etc.
- Please show the loading/progress indicator when loading from an external service or mock service.
- You can also use an external public API to load data from.
- Please ensure you have 100+ columns and 2000+ rows of data to display
- Please provide detailed step by step documentation on how to use the component
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give 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.
CSS3
- 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.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
ReactJS/Javascript
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11
- Safari on iPad
- Safari on iPhone
We have an internal website, that has several tables, that display dynamic data.
The tables have large number of columns (around 100+) and large number of rows 10000+.
We need a component that easily allows us to switch the current table(s) with a React Component.
Final Submission Guidelines
React-virtualized Component is a open source library that provides good performance for large number of rows and columns.We would like to build a wrapper around the component (let’s call new component ReactGrid) which allows using the React-virtualized component in a developer friendly way.
The wrapper component should be able to read all configuration via JSON and adjust itself based on json settings.
React Grid should support the following configuration options & runtime options.
Configuration Options:
Pagination
- Page Size
-- Number of records to show on a page
- Allow Paging
-- If set to true, the component should display pager controls and adjust records page.
-- Setting it to false, should display all records
- Page Control location
-- Left, Right, Top Bottom
- Pager CSS Classes :
-- CSS classes to be applied to pagination controls
- Allow Custom Paging
-- Allow client code to load the records per page. Client will set number of pages.
-- The client load just the data shown on current page. Control will pass page changed event / callback.
Sorting
- Allow sorting
- If set to true, user should be able to sort the grid by clicking on header, Clicking twice should toggle the sort.
Read Only
- If set to true, show data as read only
- If set to false, display editable rows should be displayed.
- Grid should display Save button and Cancel, that allows user to save data back to Values records.
Values
- The array of JSON records, that needs to displayed
Freeze
- Allow Freezing
- Freeze Rows
- Freeze Rows from Top
- Freeze Columns
Please note this feature should during runtime as well. A user should be able to freeze columns and rows (similar to excel) (via right click menu on grid header or some way similar, please check the run time option)
Columns Array
- Accept a list of “Columns” to be displayed
- A column could have following properties
-- Field - Field from Values Array that needs to be displayed
-- Alignment: Left / Right / Center
-- Header Text : By default Field value,
-- Header Alignment : Left / Right / Center
-- Edit Item Template : Default <input type=”text” /> display the current value
-- Please note the Developer should be able to configure the template to be used, it could be a checkbox, combobox etc
-- Read Only : Make this column readonly
-- Visible : true / false
-- Footer Text :
-- Column Class : “any custom CSS class to be applied to this column”
-- Footer Style : CSS Classes
UI
- Background color to be applied to the ReactGrid.
- Border Style (Border Color, Border Width etc)
- CSS Style to be applied to the entire Grid (Font, Font Size, Color etc)
- Cellspacing
- Cellpadding
- Gridlines: true / false
- Auto resize
Runtime options
- These features should be available to end user interacting with the grid
- Allow Drag and Drop of Columns. If set to true, user should be allowed to drag and drop columns in the Tables
- Allow Freezing of Rows / Columns . This functionality should be similar to excel . User should be able to freeze rows or columns or both.
Please feel free to add attributes or values, as make sense. Please assume defaults wherever feasible.
A Normal Use Case
- Developer will query data from an API
- Configure the Grid to display columns, and other configuration
- Pass the Data from API as values to be displayed on the Grid
- User can freeze columns or rows at runtime similar to Excel.
- User can drag and drop and arrange columns as per wish.
Submission
- Please showcase your component in a html page.
- You can display mock data in the showcase. e.g. an address book or table of books showing author, name, etc.
- Please show the loading/progress indicator when loading from an external service or mock service.
- You can also use an external public API to load data from.
- Please ensure you have 100+ columns and 2000+ rows of data to display
- Please provide detailed step by step documentation on how to use the component
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give 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.
CSS3
- 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.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
ReactJS/Javascript
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11
- Safari on iPad
- Safari on iPhone