Hey all,

I've been given the task of creating an editable table for use on my companies intranet. I don't know a great deal about javascript (I'm not a pro web developer, it's a hobby!) and quite honestly, I'm not sure I can accomplish the task I've been set, but with your help I'll see what I can do.




Above is a mockup of the type of thing I'd like to produce. It's a wysiwyg table /datagrid generation application which needs to have the following functions:
  • add/remove table columns
  • add/remove table rows (content)
  • the ability to sort pre-defined columns
  • the ability to save multiple tables in a MySQL database
  • the ability to print the table without any editing icons/rows visible
I'm fairly proficient using PHP/MySQL and I could probably do something static which requires page refreshes to generate the table but I'd like something a bit more intuitive and instant.

Hopefully the image is pretty self explanatory but to explain;
The red + signs are click able and will add a column to that point when clicked. This will then display (unhide) a box underneath prompting the user to enter a column heading and the option to make it sortable.
The green row at the bottom will add another blank row when clicked (or it could contain the word "empty" or something so that there is something to edit) to the datagrid. This function could just be a button below the datagrid rather than an actual table row.

I'm not sure of the best way of storing this information in MySQL. There are likely to be many tables, but I'll refer to the appropriate forum for this information.

In the ideal situation, someone here knows of something which has already been written (or something which is close to what I want) and can provide a link! Failing that, any pointers would be great. I'm open to using any ajax/javascript framework.

Thanks so much for any assistance you can provide,
Rob