Closed

Create advanced table functionality in Javascript

This project received 15 bids from talented freelancers with an average bid price of $193 USD.

Get free quotes for a project like this
Employer working
Project Budget
$30 - $250 USD
Total Bids
15
Project Description

Please use some sort of javascript framework (Ajax, html5 or whatever) to solve the following. Your solution should not require any browser plugin, and work in the latest versions of Firefox and Chrome.

I need a page with two tables next to each other. The tables should have four columns each with sample data of types date, decimal, text, integer. If one presses the header of a column, the table should get sorted by this column ascending. Pressing it twice will sort the column decending, and three times means that the table will no longer be sorted by this column.

It should be possible to "link" a row from one table to a row in another. The way to do this is to "draw" a line between the two rows. The line should be green. It should be possible to link in a many-to-many relationship. The integer column in the tables is an "ID" column and it is the ids that should be stored in the code. In a later project, these links will be stored in a database, so please document carefully in the code, in which variables these links are stored.

It should be possible to select a "link" and press the delete button to remove it.

The two tables should scroll independently. The lines between the linked rows should show correctly when scrolling or using the zoom feature in the browser (if you cannot get this to work with the zoom feature, then please implement your own zoom feature to be used if the user has a small screen). They should also show correctly if the user sorts the tables by a different column.

The tables should fill the entire screen on all resolutions.

Please create a check box in the top right corner, which if checked will remove all rows that have been linked to other rows and continue to do this if the user links new rows.

It should be possible for the user to edit the cells in the table on the left in a way similar to a spreadsheet, where the cursor is inside the cell. If a boolean in the code is true, this edition functionality should be turned off so the user cannot edit any cells.

Please provide your [url removed, login to view] username in your bid. You need to push your code to a [url removed, login to view] repository I will create for you, to solve this project. You can expect many more projects if you complete this one.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online