21

Allow tables to display more than 200 rows

Hi, we have a dashboard that is used for reporting. Its main component is a large table that displays data and images, but it's becoming difficult to run usable reports because of the table size limitations. Being able to display more than 200 rows of a table would be a great addition.

45 comments

  • 2
    Avatar
    Per Sandström

    While this restriction is very absurd and caused me a lot of head ache, there is a silly workaround: In the Klip Source Code you can add “maxData”:500. This changes the number of max rows. You must do this for each individual Klip.

    So while there is a workaround, it is very cumbersome and not very pretty. There should be a better alternative.

  • 1
    Avatar
    Scott Lawrence

    Thanks for adding your voice to this topic!

    Can you share some additional information about how you are using Klipfolio in this instance and the driving need behind more rows in a table?   I would love to understand more about your need and this use case.

     

  • 0
    Avatar
    Per Sandström

    The product I'm developing in Klipfolio shows logs from certain machines. Sometimes it has 50 items to show, sometimes it is 200 or even 1000. It took us a while to realize that the result was arbitrarily cut off at 200 items, giving us an incomplete view of the data. It would have been preferable for us to simple have a slow view, making us react to the large amount of data. Or at the very least be given a warning that all data wasn't displayed.

    By the way, 1000 items still rendered in under halv a second, so performance wasn't that big of a problem.

  • 0
    Avatar
    Scott Lawrence

    @Per - thank you for the additional context.  I'll raise it for additional exploration.  

    Performance is still a consideration here.  It may be that your list is relatively fast.  Others may not be as they could be based on some heavy formulas or have hundreds of thousands of result rows coming back.  

    Your suggestion to at a minimum have a notice to inform the builder the data is a subset is very reasonable.

    Will explore it further with the team.  

    Thanks again!

  • 6
    Avatar
    Knowit Experience Admin

    Another option is to introduce "paging" or "infinite scroll", to load 200 rows at a time.

  • 0
    Avatar
    Scott Lawrence

    Hi Jorn, great to hear from you again.

    You must be reading my mind.  That is one of the possible angles I was raising to consider when we look into this request.

  • 0
    Avatar
    Admin iPlan

    This is needed and paging would be the perfect option

  • 0
    Avatar
    Denis Wolf

    this is a must-have, rendering or loading up to a few thousands rows should not be an issue in 2016! :)

  • 0
    Avatar
    Scott Lawrence

    Hi Denis, 

    I'm always interested in understanding use cases behind enhancement requests.  Could you help me understand more about how you use Klipfolio in the context of thousands of rows being shown in a table?  Also, how many records are you showing in a table on your dashboards?  

    Can you share more about what your users are doing and when they would need thousands of rows on their dashboard?

    Thanks,

    Scott.

  • 0
    Avatar
    Eric Baumgardner

    I second this. Pagination for the table would be a very welcome addition.

    Our use case:
    We are using the klipfolio to analyze NPS feedback for few different physical stores. Our data source has date, store, score (number), positive feedback (text) and negative feedback (text) columns. We would like to be able to go through all the feedback given in a selected date range. Sometimes there might be more than 200 feebacks given per day.

  • 0
    Avatar
    Scott Lawrence

    Hi Eric,

    Thank you for your additional context and use case!  I will add to the context for the enhancement request.

    Cheers,

    Scott.

  • 0
    Avatar
    Chung Nguyen

    I have a contact list of coworkers. In order to avoid having hundreds of contacts in my phone's contact list, I have a table that shows me their phone and email that I can click on. This is a nice solution because I can include important HR info not normally available in a phone directory.

    50% of my list is cut off so I set off to find out what I was doing wrong and ended up here. I just wanted to add another use case scenario to the conversation.

    Being able to filter a table by typing would be nice too!

    -Chung

  • 0
    Avatar
    Scott Lawrence

    Hi Chung,

    Thank you for your additional context and your new use case!  I will add to the context for the enhancement request.

    Regarding the filter, you could associate a Type-in User Input Control to filter the results.

    Cheers,

    Scott.

  • 0
    Avatar
    Chung Nguyen

    Your suggestion to use a user input control is exactly that something I was looking for. Thank you very much!

    -Chung

  • 0
    Avatar
    Seth Wilberforce

    Per or anyone else, 

     Could you show me where you add  “maxData”:500,   in the source code to display 500 rows. Thanks,

    Seth

  • 0
    Avatar
    Leann Lewis

    I haven't encountered a problem with this yet BUT, that being said, I have a few table Klips that list data grouped by branch. Our Home Office execs look to those for metrics and they can sort the table using an input control by specific criteria.

    Right now I want to say we have about 140 branches. If we ever grow above 200 this will adversely affect these visualizations.

  • 1
    Avatar
    Lucas Garcia

    It troubles me that this is still an issue, since February 09, 2016. It is so simple, yet so limitting. Unecessary constrain, needs a workaround (paging, scrolling, ...).

  • 0
    Avatar
    Tim Johnson

    The maxData setting suggested I believe is actually the maxRows property which is set in the Klip's Table component properties. Tables will not display more than 200 rows even if the maxRows property is a value higher than 200 (it can be set from 1 - 100,000). This is indeed arbitrary since a horizontal bar chart for example will display an unlimited number of results/rows.

    A sensible work around to display unlimited rows in a table format is to use the HTML component and recreate the look of the system table component. The HTML component uses dynamic height so you can choose to use scroll bars with a fixed height or have the Klip change height automatically depending on the number of rows (every component should do this!). There is no limit to the number of rows (we're working with 500+) however there are aspects like sorting and indicators that don't apply to the HTML component. Just add whatever data series needed to create your columns (array model) and reference those in the HTML.

    The example below uses a header row with titles and four columns of data - NAME | BILLED | BUDGET | VAR

    Here's the HTML and inline styling to hook everything up:


    <table class="cx-table" style="width: 100%">
    <tr>
    <th class="border-top-1 border-left-1" style="width: 40%"><div class="cell align-0" style="display: block; padding:5px 3px 5px 8px;">NAME</div></th>
    <th class="border-top-1 border-left-1" style="width: 20%;"><div class="cell align-r" style="display: block;">BILLED</div></th>
    <th class="border-top-1 border-left-1" style="width: 20%"><div class="cell align-r" style="display: block;">BUDGET</div></th>
    <th class="lastVisibleCol border-top-1 border-left-1 border-right-1" style="width: 20%;"><div class="cell align-r" style="display: block;">VAR</div></th>
    </tr>
    </table>

    <table class="cx-table" style="width: 100%">
    {{each NAME}}
    <tr>
    <td class="border-left-1" style="width: 40%;"><div class="cell align-left fmt-txt" style="display: block; padding: 3px 8px;"><div class="label-inner align-left label-size-1 label-style-regular" style="white-space: nowrap;">${$value}</div></div></td>
    <td class="border-left-1" style="width: 20%;"><div class="cell align-r fmt-txt" style="display: block; padding: 3px 8px;"><div class="label-inner align-left label-size-1 label-style-regular" style="white-space: nowrap;">${BILLED[$index]}</div></div></td>
    <td class="border-left-1" style="width: 20%;"><div class="cell align-r fmt-txt" style="display: block; padding: 3px 8px;"><div class="label-inner align-left label-size-1 label-style-regular" style="white-space: nowrap;">${BUDGET[$index]}</div></div></td>
    <td class="lastVisibleCol border-left-1 border-right-1" style="width: 20%;"><div class="cell align-r fmt-txt" style="display: block; padding: 3px 8px;"><div class="label-inner align-left label-size-1 label-style-regular" style="white-space: nowrap;">${VAR[$index]}</div></div></td>
    </tr>
    {{/each}}
    <table>




  • 0
    Avatar
    Scott Lawrence

    Hi Leann, Lucas, 

    Your support for this request has been added to the enhancement request and will help with prioritization.

    Leann, I really appreciate the additional context describing your situation.  

    This is on our radar, but has not yet been scheduled.

    Cheers,

    Scott.

  • 0
    Avatar
    Guido Stut

    Hi Scott,

    Do you already know more about the planning of this request? The fact that a table can have max 200 rows really puts Klipfolio at a disadvantage compared to tools as Tableau. For me and the company I work the urgency is high to have >200 rows, for example, if we want to visualize performance per product.

    Thanks, Timo

  • 0
    Avatar
    Scott Lawrence

    Hi Timo,

    Thank you for following up.  This is definitely on our radar and viewed as important, however it has not yet been scheduled.  In the short term, have you tried the approach Per mentioned in the first comment in this thread?

    Also, I'm interested in how many products you are trying to visualize on your dashboard and how you would like to be visualizing their performance.  Any additional context would be very helpful.

    Thanks,

    Scott.

  • 0
    Avatar
    Guido Stut

    Hi Scott,

    I have tried the approach Per mentioned, but I can't find the 'maxData' in the Klip's source..Can you help me out here? I can send the complete Klips source code if you want, or provide you login data of our Klipfolio account, so you can have a look yourself.

    The number of products does vary, but it can go up to 5000 products. I started visualizing with the following columns, but it should be extended with more columns as this was just a test of me:

    <Product ID> <Product page visits> <Transactions> <Conversion Rate>

     

  • 3
    Avatar
    Tim Johnson

    @Timo You need to add a line in the Klip's source code to adjust the 'maxData' property. In the Klip editor, choose 'View Klip Source Code' from the advanced tools options and search (CTRL F or CMD F) for the 'maxRows' property of the table.

    It should look something like this depending on the table properties you've set for the Klip:



    Move your cursor to the end of the maxRows line, add a comma to the end of that line then add a new line using Return or Enter.

    On the new line, add the following: "maxData": 5000

    It should like like this when you're done:

    Make sure to click the 'Update' button in the Klip Source editor to save the changes.


     

  • 0
    Avatar
    Guido Stut

    Hi Tim,

    Thanks for the explanation. I reproduced exactly the steps above, but unfortunately it doesn't work. The max number of rows stays 200. So, the issue remains.

  • 0
    Avatar
    Tim Johnson

    @Timo That's strange, we're using the same approach in 8 different cases that return thousands of rows. Did you try exporting the Klip data as .csv to verify this? 

  • 0
    Avatar
    Guido Stut

    Now I see it's actually working, I'm getting thousands of rows. I was verifying in the 'Edit'-mode, but there it's still showing max 200 rows. After clicking 'save' and showing the klip in a dashboard, the nr rows are extended to thousands.

    By the way, performance now (loading time of the klip) is not that good, but that's not the actual discussion here ;-)

  • 0
    Avatar
    Tim Johnson

    @Timo Good to hear it worked! In our experience, the Klip load time increases with large tables especially with any formulas running across columns. Be cautious with this work-around and the demands on the browser/dashboard.

  • 0
    Avatar
    Enforce_Admin

    @Scott Lawrence - is there an update on an expected release to extend the row count in a table? Or, in the worst case, is it possible to modify the table HTML code above to hide the table columns from being visible like in the standard klip table?

  • 0
    Avatar
    Scott Lawrence

    Hi Enforce_Admin,

    The feature to support more rows/larger tables is not yet scheduled, so I do not have a timeframe for you at the moment.  That said, it is still on our radar.

    Regarding using the HTML component to create a table, there is a great thread on tables using HTML here.  Participants in that thread may have additional suggestions about what can be done with a table in an HTML component.

    Cheers,

    Scott. 

  • 0
    Avatar
    Madeleine Balchan

    I think the markup for this was changed so that the previous fix of adding a maxdata: 500 no longer works...the source code for my table does not display a maxdata or maxrows option. 

    I would also greatly appreciate the ability to add rows to a table with the knowledge that it will make update time longer. We are trying to compare the productivity of an inventory of approximately 900 items, it is frustrating to be cut off after 200.

    Thank you,

    Madeleine

Please sign in to leave a comment.