editcouch-cms

Best way to make a custom table editable in Couch CMS


I have an HTML table on one of my pages and I would like to make it editable for my client. It holds a working scheme so it is nice that if it changes they can use edit it themselves. The problem is that the table itself has an ID and it is wrapped in two others. That is necessary for some scripts and DOM manipulation I run. So I can't make the table itself editable, but making every single cell an editable region seems overkill. Is there an easier way? This is the necessary HTML for the table:

The first row (thead) shouldn't be editable, but all the other cells should be. Here it's in a fiddle.

<div id="tables-wrapper">
    <div id="overflow-table">
        <table id="data-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Maandag</th>
                    <th>Dinsdag</th>
                    <th>Woensdag</th>
                    <th>Donderdag</th>
                    <th>Vrijdag</th>
                </tr>
            </thead>
            <tr>
                <td>Vrije raadpleging
                    <br>8u30 tot 10u30</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
            </tr>
            <tr>
                <td>Ochtend
                    <br><strong>op afspraak</strong>

                </td>
                <td></td>
                <td>Dr. Y</td>
                <td></td>
                <td></td>
                <td>Dr. X</td>
            </tr>
            <tr>
                <td>Namiddag en/of avond
                    <br><strong>op afspraak</strong>

                </td>
                <td>Dr. X
                    <br>Dr. Y</td>
                <td>Dr. Z
                    <br>Dr. X</td>
                <td>Dr. Z
                    <br>Dr. Y</td>
                <td>Dr. X
                    <br>Dr. Y
                    <br>Dr. Z</td>
                <td>Dr. Y
                    <br>Dr. X</td>
            </tr>
            <tr>
                <td>Vrije raadpleging
                    <br>van 17u30 tot 19u</td>
                <td>Dr. Y</td>
                <td>Dr. Z</td>
                <td>Dr. X</td>
                <td>Dr. Y</td>
                <td>Dr. X</td>
            </tr>
        </table>
    </div>
</div>

Solution

  • This looks like a perfect case for 'Repeatable Regions' - http://www.couchcms.com/docs/concepts/repeatable-regions.html

    Define six 'text' or 'textarea' type editable regions (one for each <TD>) and them make them repeatable.

    This way the user can keep adding as many rows as necessary while being able to edit each cell in every row.

    On the front-end, use cms:show_repeatable to loop through the rows/cells and recreate your HTML table.

    Hope this helps.