search

betagouv / api-subventions-asso

MIT License
5 stars 1 forks source link

Faire en sorte que le header du tableau soit toujours visible (sticky) #2047

Open VSerain opened 8 months ago

VSerain commented 8 months ago

stuck by le DSFR Image^1

mxmeunier commented 8 months ago

https://trello.com/c/QMNUUX2L/180-évolution-du-tableau-de-bord-possibilité-de-scroller-en-gardant-les-headers-en-fixe

mxmeunier commented 7 months ago 
table {
        border-collapse: collapse;
        width: 100%;
    }

    .test {
        /* fr-table already relative */
        /* position: relative; */
        height: 200px;
        overflow: auto;
    }

    .test th {
        position: sticky;
        top: 0;
        background-color: black;
        color: white;
    }
mxmeunier commented 7 months ago 
<div class="fr-table test" id="table-7497">
                <table>
                    <thead>
                        <tr>
                            <th scope="col">th0</th>
                            <th scope="col">th1</th>
                            <th scope="col">th2</th>
                            <th scope="col">th3</th>
                            <th scope="col">th4</th>
                            <th scope="col">th5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                        <tr>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                            <td>Lorem [...] elit ut.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
mxmeunier commented 7 months ago

@VSerain @alice-telescoop j'ai mis ça là si vous voulez jouer mais pour le moment j'ai pas trouvé comment reproduire le header sticky trouvé sur les internet comme https://codyhouse.co/nuggets/sticky-table-header

mxmeunier commented 7 months ago

message sur slack pour voir comment le DSFR gèrerai ce sticky header ou plutôt une variante accessible et DSFR friendly

mxmeunier commented 7 months ago

@alice-telescoop @VSerain je passe ce ticket en need information

mxmeunier commented 7 months ago

https://gouvfr.slack.com/archives/C012RFYSRCG/p1707733135710589?thread_ts=1707390517.156749&cid=C012RFYSRCG

Des nouvelles du DSFR d'ici une semaine

alice-telescoop commented 7 months ago

Je le remets dans le sprint pour qu'on l'oublie pas

alice-telescoop commented 7 months ago

.

VSerain commented 2 months ago

Je le met dans le prochain sprint pour vérifier

VSerain commented 2 months ago

Stuck by #2560