Add multiple columns dynamically

[iamanoopmk]

I went through the examples but could not find any that lets you add columns dynamically.

The requirement here is that the first column will act as table header and the rest of the columns must be attached based on the data provided. I tried it the way below but didn't work. Is this achievable?

https://playground.jsreport.net/w/anon/igLSbm3s

[manemal]

@iamanoopmk I don't believe this is possible as it uses the first row (with the pre-defined number of columns) as a template for other rows when iterating over the source data. To achieve what you want, it would be better to use the docxtemplater recipe (+ HTML table module) although this is an additional commercial component.

Why is it you are looking to dynamically format data horizontally? If it's listing people horizontally, then you are limiting the number of people that can be displayed, as clearly more than 6 people and it will start looking squashed and hard to read?

[iamanoopmk]

@manemal Thank you for the response.

The use case is that we are using JSReport to generate monthly reports with some numbers where the month is used as a column with various KPIs as row headers. So, depending on the month of the report generation, we have to add data for previous months to that table. Essentially we do not want to have fixed months columns with empty data or future months showing up.

Thank you for the suggestion for docxtemplater. Seems a bit expensive for the table module.

BTW, someone has mentioned that they were doing column iteration in this issue. Don't know if that is the case or not.

[bjrmatos]

what @manemal says is right, right now it is not possible because we use the first row as a template. probably the column iteration example mentioned here was just some confusion of the user.

The use case is that we are using JSReport to generate monthly reports with some numbers where the month is used as a column with various KPIs as row headers. So, depending on the month of the report generation, we have to add data for previous months to that table. Essentially we do not want to have fixed months columns with empty data or future months showing up.

the case makes sense, we will investigate the best way to implement this, added to our work queue.

[bjrmatos]

@iamanoopmk it will help even more if you can show the desired output and also the data that is supposed to create that output. i see that you tried to replicate the docxtemplater vertical table syntax on your playground, that can be a good option to solve the problem. actually is the option that makes more sense to me so far but just wanted to know if that fits your case so we can discuss this internally if it makes sense that we choose a similar solution

[iamanoopmk]

I have two types of requirements as of now for our client.

one is a table with first column as a header and data being added into successive columns. Similar to the chart table of a MS Word chart as showing in below image

Another is as shown below

I think both the data will look the same. The expectation is that both rows and columns will be dynamically added.

{ "columns": [ "", "Jan", "Feb", "Mar", "Apr", "Total Year", "Error" ], data: [ { "variable": "KPI1", "jan": 100, "feb": 200, "mar": 150, "apr": 80, "total_year": 540, "error": 0 }, { "variable": "KPI2", "jan": 140, "feb": 140, "mar": 100, "apr": 80, "total_year": 460, "error": 0 }, { "variable": "KPI3", "jan": 120, "feb": 170, "mar": 100, "apr": 80, "total_year": 400, "error": 70 } ] }

[bjrmatos]

one is a table with first column as a header and data being added into successive columns. Similar to the chart table of a MS Word chart as showing in below image

so if i'm right, this case can be solved with the vertical table syntax, right? first cells are static headers (Series 1, Series 2, Series 3), and the rest of cells should be dynamic generated based on data

Another is as shown below

do in this case both the cells and rows are dynamic? so you don't know if you will only have just KPI1, KPI2, KPI3 and Jan, Feb, Mar, Apr, Total Year, Error, it can be more or less right?

[iamanoopmk]

Yes, the first case would be solved that way.

The second case is the more generic one. If implemented then it would serve even the first case. Here the number of KPIs is dynamic and the number of months is also dynamic. Essentially this syntax would make any type of table to work.

[bjrmatos]

we added support for the vertical and also for fully dynamic rows and columns

vertical mode

dynamic rows/columns

(example data for dynamic rows/columns)

{
        rowsItems: [
          ['Jan', 'jan.blaha@foo.com'],
          ['Boris', 'boris@foo.met'],
          ['Pavel', 'pavel@foo.met']
        ],
        columnsItems: ['Name', 'Email']
      }

[iamanoopmk]

Sorry to reopen the same issue. But the dynamic rows/columns mode need a way to style the table header and rows currently it repeats the same styling as the header on all rows.

[bjrmatos]

can you show me what kind of styles are repeated? I was testing a bit and it looked like it was getting different colors and backgrounds all the time

[iamanoopmk]

For example, below image is one of the default table style that I applies. The row item text colour did not change to dark like it usually happens on MS Word

Another example, I want headers to be in bold while rows to be in normal font weight. But below image shows everything to be in bold.

Hope this makes it clear.

[bjrmatos]

just for the record, i was using also some default table style and it produces expected result

maybe other styles works a bit differently, will check.

Another example, I want headers to be in bold while rows to be in normal font weight. But below image shows everything to be in bold.

yes, i think that is expected, i would say that for the dynamic rows, columns styles to work fine you need to define table styles in a general way, not to be bound to the cell position. I think the default table styles work like that (or at least when you use for example that blue one that I'm using), I don't know if there is some way to create such styles from scratch however I think it should exist somewhere in the MS Word. otherwise, we will need to create some special configuration for the styles but i think we will rather prefer such thing be handled in the MS Word

[iamanoopmk]

Thanks for the hint.

For some reason the default styles are not working properly like how it is for you. However, I created a custom style and it seems to be working

Not sure why default styles are not getting applied. Will test more on this.

Also, this is not yet live on playground?

[bjrmatos]

Thanks for the hint. For some reason the default styles are not working properly like how it is for you. However, I created a custom style and it seems to be working

hmm yes that is strange, i've test other default styles and they seem to work fine.

I see that there is an option to modify the table style from a default one, maybe that helps if you make for example one change there after picking one of the default styles.

Also, this is not yet live on playground?

no, this is still on git only, usually we update playground after it is included in jsreport release.

[thiagogualberto]

If I want to create a table with dynamic columns (4 columns, for example), but that has a single header that involves the entire table. How do I do this?

[bjrmatos]

hi @thiagogualberto

do you mind sharing an example of the end result? it can be a screenshot of the table you want to produce in MS Word, or even the .docx file with the table