Advice need on table/calendar creation

[tthias]

Hello everyone,

I'm creating a feature where the user can see its airbnb listing price day per day for a month.
Something like that:

So I was thinking of using a bootstrap table.
Pretty easy for the rows with a repeat row but how should I handle the dynamic column range (30/31 days per month)

I'm using a 3rd party api for the data and their output looks like this:

{
  "data": {
    "listing1": {
      "2019-01-15": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-16": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-17": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      }
    },
    "listing2": {
      "2019-01-15": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-16": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-17": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      }
    },
    "listing3": {
      "2019-01-15": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-16": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      },
      "2019-01-17": {
        "price": 444,
        "min_length_of_stay": 2,
        "available": 1
      }
    }
  }
}

So I could easily do a repeat column by day for each row (listing).
But that would mean if I have for exemple 10 listings. I would have 10 repeat rows with each 30 repeat columns.

Would that be an issue or a mistake performance wise ?

Thanks a lot,

[sid]

Hi,

Using multiple repeats is a solution.

But, there would most likely be a performance issue after a point. Trying to reduce number of rows shown at a time via paging and managed use of formatters on page will help keeping performance in check.

[Philip_J]

I’m pretty sure I’ve got a table in my app which has a column that is either hidden or shown dynamically based on a condition.

If so you should be able to do the same with the last column for the 30th/31st day.

[nshkrsh]

better to show the calendar for one list at a time. this way your repeat is limited to 31 items max and IMO this is better UX - 10*31 items is too much data to consume for the end user to make sense comfortably.

maybe as a compare you may have 2 or max 3 sets of this calendar. which controls the performance issues and also allows for better UX.

[tthias]

Thanks for your feedback I will try the column repeat and then see if their is performance issue.

[tthias]

It doesn't seems to be an issue performance wise but I can't get it look right.
I can't find a way to create a repeat region on the table "td" tag.

With that data:

{
    "546006": {
        "2020-11-01": {
            "price": 50,
            "min_length_of_stay": null,
            "available": 1
        },
        "2020-11-02": {
            "price": 60,
            "min_length_of_stay": null,
            "available": 1
        },
        "2020-11-03": {
            "price": 60,
            "min_length_of_stay": null,
            "available": 1
        }
    },
    "546012": {
        "2020-11-01": {
            "price": 50,
            "min_length_of_stay": null,
            "available": 1
        },
        "2020-11-02": {
            "price": 60,
            "min_length_of_stay": null,
            "available": 1
        },
        "2020-11-03": {
            "price": 60,
            "min_length_of_stay": null,
            "available": 0
        }
    }
}

My table should be:

Id - 2020-11-01 - 2020-11-02 - 2020-11-03
"546006" - 50 - 60 - 60
"546012" - 50 - 60 - 60

So in the same row I have the id of the object and a cell for each day with the price.
I was thinking of doing that:

<table class="table">
    <thead>
        <tr>
            <th>Annonce</th>
        </tr>
    </thead>
    <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="getAnnoncesPrices.data.getAnnoncesPrices.data" id="tableRepeat2">
        <tr>
           //first cell with the key
            <td dmx-text="$key">
            </td>
            //second cell is a repeat of cells for each day
            <td is="dmx-repeat" dmx-bind:repeat="$value" dmx-text="price">
            </td>
        </tr>
    </tbody>
</table>

But that doesn't work, the only thing that seems to work is to have two rows

    <table class="table">
        <thead>
            <tr>
                <th>Annonce</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="getAnnoncesPrices.data.getAnnoncesPrices.data" id="tableRepeat2">
            <tr>
                <td dmx-text="$key">
                </td>
            </tr>
            <tr is="dmx-repeat" dmx-bind:repeat="$value">
                <td dmx-text="price">
                </td>
            </tr>
        </tbody>
    </table>

Which looks like that:

Do you have any clue on how I can make this fit on the same row ?

Thanks !

[sid]

You can use a self repeating TD inside the first tr itself.
Add a TD and in dynamic attributes, you should find a repeat option.

Beware that self repeats are not a good idea if you wish to do any complex stuff within the repeated item.