Add css class to columns header

This PR Fixes #1853

Hello Everyone!

Description

In this PR i added a feature so that Column header will have CSS class names which follows the format: taipy-table-header-{column-name}, where {column-name} is transformed to only allow these characters (A-Z, a-z), hyphens (-), and underscores (_)

Code Changes

Added the function generateHeaderClassName to transform the column name into a valid CSS class implemented in the file tableUtils.tsx . Updated files AutoLoadingTable.tsx and PaginatedTable.tsx where Table Head and Table Cell are used to incorporate these new CSS classes.

Testing

Each column header now has a unique CSS class like taipy-table-header-column1 taipy-table-header-orderNumber

Impact

Now we can easliy add any css style to different column headers.

Thanks!

@quest-bot loot #1853

Quest PR submitted!

@THEBOSS0369, you are attempting to solve the issue and loot this Quest. Will you be successful?

---

Questions? Check out the docs.

@FredLL-Avaiga ! I have made the changes you asked me please review it. Thanks !

Hey @FredLL-Avaiga ! I have fixed the changes requested. Can you guide me how to verify the test. I couldn't able to find any readme file in tests section and in contributing.md there are no particular steps for it. If you could provide me any doc or any readme file , It will be very helpful Thanks!

Hey @FredLL-Avaiga ! I have added the Test file below is the ss of conosle.

and this is the ss for the demo script file

@FredLL-Avaiga i have fixed the changes, now empty or undefined will resolves to empty sring. SS for tests

Also, i will add an example in the doc\gui\examples\controls directory ,right now i'm encountering while doing it. Most probably i will be able to do it till tomorrow 😅

Hey @FredLL-Avaiga ! This is the ss for test of the empty string

and this for the npm test

and i have added the example file column_name_styling.py in doc\gui\examples\controls directory please take a look, i'm not very good with python scripts so i have made it with the help of gpt so if there is something wrong in the example please give me feedback about it.

Thanks!

@FredLL-Avaiga ! Please review it now.

@FredLL-Avaiga , I have tested with 3 different types Please check the results

1. Both Occupation or Job Code note i have intentionally left the space between taipy-table-occupation or job to see the results.

Result

2. Only Job / Only Occupation Code

Result

Is there anything else i'm missing other than this ? and should i push any code from above ss if yes then most probably it will be for occupation or job right?!

@FredLL-Avaiga , I have tested with 3 different types Please check the results

1. Both Occupation or Job

   note i have intentionally left the space between taipy-table-occupation or job to see the results.

2. Only Job / Only Occupation

Is there anything else i'm missing other than this ? and should i push any code from above ss if yes then most probably it will be for occupation or job right?!

• First example cannot work because you have generated a class name where blanks were replaced by hyphen and in your style/css you're using a version with blanks...
• Second example works for me
• And yes the example should be with Occupation or Job

Hey @FredLL-Avaiga ! I have now added the Job in the example file. Please review it , this is the ss for this

@FredLL-Avaiga ! My apologies for the deletion of the files, these files were in my commit when i merged the main branch and thought those file shouldn't be commited and hence i removed them from my commit now i have stored them back.

I don't get why you cannot have a column name with space in it so that we can show the classname transformation ?

For this yesterday you replied this

Second example works for me

so i thought that second should be commited again i didn't get it properly, even though you specified this

And yes the example should be with Occupation or Job

That's my mistake, again apologies for this.

Now this is my final changes result i have included Job or Occupation

and this is the code images

This won't be happening again 😥 Thanks

@FredLL-Avaiga ! Thanks for approving this PR 😍. Now shall i go ahead and look for other issues or should i have to wait till this PR gets merged?

can you fix the linter and the codespell issues ?

Let me try sir and get back to you.

@FredLL-Avaiga ! Please run the test now maybe these errors will be solved now.

@FredLL-Avaiga Spell checked fixed in the previous one and one out of 2 linter was fixed. I have now moved the pandas import line above maybe now the linter will be fixed. If even after it's not fixed then please guide me what am i doing wrong.

@FredLL-Avaiga ! Sorry for asking you again and again this is the final one this time i directly checked from the terminal and fixed it using gpt

here is the ss

Well done

Thank you sir, thankyou!! for being this much patient. Huge respect For you. ☺️

Hi @FredLL-Avaiga, @THEBOSS0369,

Some remaining conflicts prevent me from merging the Pull request. Could you resolve them so I can proceed?

Thank you.

Thank you @THEBOSS0369, I am just waiting for the tests to pass to merge the PR.

Hey @jrobinAV ! It seems many tests are failing is it something related to what i resolved. If it is then what will i have to do to resolve this? Thanks

@FredLL-Avaiga I have literally no idea what happened to class name and why these lines got copied , changed. I only resolved the branch and so many issues got created. Still i will try me best to resolve these.

@FredLL-Avaiga I have literally no idea what happened to class name and why these lines got copied , changed. I only resolved the branch and so many issues got created. Still i will try me best to resolve these.

Updating the base branch is not always automatic and can bring errors ...

tx Can you update your branch ?

Done Sir. Hope all test pass this time 🤞

@FredLL-Avaiga @jrobinAV it seems almost every test has passed

I'm updating the branch so that no new error occurs. Also if possible please merge this branch asap i don't want to face any more branch conflicts issues as it is very time consuming for us. Thanks

Can you merge this @jrobinAV ?

Hey @THEBOSS0369, Congratulations for this merged PR. Could you please contact me at [email protected] to prepare and send your swag?

Hey @THEBOSS0369, Congratulations for this merged PR.

Thank you Mam 🤗🤗

Could you please contact me at [email protected] to prepare and send your swag?

Done mam! I have emailed you My email is [email protected] (for verification)