<div id="app">
    <!--
    * Data is passed to the data-display root component. Its children will use this data.
    * It must be possible to create multiple instances of data-display with different data.
    -->
    <data-display :data="someData">
        <sidebar>
            <sidebar-section title="Controls">
                <controls>
                    <filter-control title="Search by keyword" name="keywordFilter"></filter-control>
                    <toggle-control title="Hide disabled items" name="hideDisabledItems"></toggle-control>
                    <range-control title="Year range" start="2017" end="2025" name="years"></range-control>
                </controls>
            </sidebar-section>

            <sidebar-section title="My Grid menu">
                <!--
                * This navigation controls the data-grid or any other data representation for that matter.
                * Not sure how this is going to be implemented. Are id's suitable for this?
                -->
                <navigation target="#myGrid"></navigation>
            </sidebar-section>
        </sidebar>

        <main>
            <!-- The grid will (implicitly) use the data that's provided to the root component (data-display). -->
            <data-grid id="myGrid" filter="keywordFilter">
                <!--
                * The grid contains cell renderers which, as you might have guessed, render the table's cells.
                * For each row, a cell renderer receives the data of that row as a payload.
                * One cell renderer can render multiple cells at once.
                -->

                <text-cell-renderer property="description"></text-cell-renderer>

                <date-cell-renderer property="createdAt"></date-cell-renderer>

                <custom-cell-renderer :data="dataForCustomColumn"></custom-cell-renderer>
            </data-grid>
        </main>
    </data-display>

    <data-display>
        ...
    </data-display>

    <data-display>
        ...
    </data-display>
</div>