Gov Design System CE - Templates

Table Interface: Selected 

<gov-flex class="gov-table-complex" size="s" direction="column">
    <gov-flex class="gov-table-complex__wrapper" direction="column">
        <div class="gov-table-complex__header">
            <div class="gov-table-complex__heading">
                <h3 class=" gov-table-complex__name">Table Name</h3>
                <small class="gov-table-complex__description">Table description</small>
            </div>
            <gov-flex class="gov-table-complex__panel" justify-content="space-between" align-items="center">
                <div class="gov-table-complex__records">
                    X záznamů
                </div>
                <gov-flex justify-content="flex-end" align-items="center" gap="s-nudge">
                    <form role="search" id="search" class="gov-search gov-search--fixed-width">
                        <gov-form-control>
                            <gov-form-search size="s" color="neutral" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
                                <gov-form-input slot="input" size="s" placeholder="Vyhledat v tabulce" aria-label="" input-type="search">
                                </gov-form-input>
                                <gov-button color="primary" size="xs" type="solid" aria-label="Vyhledat zadaný výraz" native-type="submit" slot="button">
                                    <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>

                                </gov-button>
                            </gov-form-search>
                        </gov-form-control>
                    </form>
                    <gov-flex justify-content="flex-end" align-items="center" gap="xs">
                        <gov-button color="primary" size="s" type="base" aria-label="Filtrovat záznamy v tabulce">
                            <gov-icon type="templates" name="funnel" slot="icon-start"></gov-icon>

                        </gov-button>
                        <gov-button color="primary" size="s" type="base" aria-label="Nastavení tabulky">
                            <gov-icon type="templates" name="gear" slot="icon-start"></gov-icon>

                        </gov-button>
                    </gov-flex>
                </gov-flex>
            </gov-flex>
            <gov-flex class="gov-table-complex__actions" justify-content="space-between" align-items="center">
                <div class="gov-table-complex__records-selected">
                    X vybraných záznamů
                </div>
                <div>
                    <gov-button color="primary" size="s" type="solid" aria-label="Smazat vybrané záznamy">
                        Smazat

                    </gov-button>
                    <gov-button color="primary" size="s" type="solid" aria-label="Uložit vybrané záznamy">
                        Uložit

                    </gov-button>
                    <gov-button color="primary" size="s" type="solid" aria-label="Stáhnout vybrané záznamy">
                        Stáhnout

                    </gov-button>
                    <gov-button color="primary" size="s" type="solid" aria-label="Zrušit výběr záznamů">
                        Zrušit

                    </gov-button>
                </div>
            </gov-flex>
        </div>
        <div class="gov-table" size="m">
            <table>
                <thead>
                    <tr>
                        <th class="gov-table--vertical-align gov-table--fit-width">
                            <gov-form-checkbox size="m" name="checkbox-group" value="value" no-label checked indeterminate></gov-form-checkbox>
                        </th>
                        <th>Název pobočky</th>
                        <th>Adresa</th>
                        <th class="gov-table--align-right gov-table--nowrap">Číselný údaj</th>
                        <th>Telefon</th>
                        <th>Stav</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="gov-table--highlight">
                        <td class="gov-table--fit-content gov-table--border-right">
                            <gov-form-checkbox size="m" name="checkbox0" value="true" no-label checked="true"></gov-form-checkbox>
                        </td>
                        <td class="gov-table--nowrap">
                            Hlavní město Praha
                        </td>
                        <td>
                            <gov-link href="#" target="_blank" size="m">
                                Novomoravská 34
                                <gov-icon type="templates" name="link-45deg"></gov-icon>
                            </gov-link>
                        </td>
                        <td class="gov-table--align-right gov-table--nowrap">
                            1 384 732
                        </td>
                        <td>
                            +420 789 345 123
                        </td>
                        <td>
                            <gov-tag color="success" type="subtle" size="s" expanded>
                                otevřeno
                            </gov-tag>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--fit-content gov-table--border-right">
                            <gov-form-checkbox size="m" name="checkbox1" value="false" no-label checked="false"></gov-form-checkbox>
                        </td>
                        <td class="gov-table--nowrap">
                            Brno
                        </td>
                        <td>
                            <gov-link href="#" target="_blank" size="m">
                                Sedlcká 22
                                <gov-icon type="templates" name="link-45deg"></gov-icon>
                            </gov-link>
                        </td>
                        <td class="gov-table--align-right gov-table--nowrap">
                            400 566
                        </td>
                        <td>
                            +420 609 345 123
                        </td>
                        <td>
                            <gov-tag color="neutral" type="subtle" size="s" expanded>
                                neuvedeno
                            </gov-tag>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--fit-content gov-table--border-right">
                            <gov-form-checkbox size="m" name="checkbox2" value="false" no-label checked="false"></gov-form-checkbox>
                        </td>
                        <td class="gov-table--nowrap">
                            Ostrava
                        </td>
                        <td>
                            <gov-link href="#" target="_blank" size="m">
                                Nové Sasko 374
                                <gov-icon type="templates" name="link-45deg"></gov-icon>
                            </gov-link>
                        </td>
                        <td class="gov-table--align-right gov-table--nowrap">
                            284 765
                        </td>
                        <td>
                            +420 789 345 221
                        </td>
                        <td>
                            <gov-tag color="success" type="subtle" size="s" expanded>
                                otevřeno
                            </gov-tag>
                        </td>
                    </tr>
                    <tr class="gov-table--highlight">
                        <td class="gov-table--fit-content gov-table--border-right">
                            <gov-form-checkbox size="m" name="checkbox3" value="true" no-label checked="true"></gov-form-checkbox>
                        </td>
                        <td class="gov-table--nowrap">
                            Plzeň
                        </td>
                        <td>
                            <gov-link href="#" target="_blank" size="m">
                                Jihočeských hrdinů 222
                                <gov-icon type="templates" name="link-45deg"></gov-icon>
                            </gov-link>
                        </td>
                        <td class="gov-table--align-right gov-table--nowrap">
                            185 599
                        </td>
                        <td>
                            +420 890 345 356
                        </td>
                        <td>
                            <gov-tag color="error" type="subtle" size="s" expanded>
                                zavřeno
                            </gov-tag>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--fit-content gov-table--border-right">
                            <gov-form-checkbox size="m" name="checkbox4" value="false" no-label checked="false"></gov-form-checkbox>
                        </td>
                        <td class="gov-table--nowrap">
                            Liberec
                        </td>
                        <td>
                            <gov-link href="#" target="_blank" size="m">
                                Česká 4678
                                <gov-icon type="templates" name="link-45deg"></gov-icon>
                            </gov-link>
                        </td>
                        <td class="gov-table--align-right gov-table--nowrap">
                            107 982
                        </td>
                        <td>
                            +420 789 367 123
                        </td>
                        <td>
                            <gov-tag color="success" type="subtle" size="s" expanded>
                                otevřeno
                            </gov-tag>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </gov-flex>
    <gov-flex class="gov-table-complex__pagination" direction="column-reverse" justify-content="flex-end" align-items="flex-start">
        <gov-flex class="gov-table-complex__per-page" justify-content="flex-end" align-items="center">
            <gov-form-select name="per-page" size="s">
                <option value="5" selected>5</option>
                <option value="10">10</option>
                <option value="25">25</option>
            </gov-form-select>
            <label>záznamů na stránku</label>
        </gov-flex>
        <gov-pagination size="s" color="primary" current="1" total="33" aria-label="Stránkování tabulky">
        </gov-pagination>
    </gov-flex>
</gov-flex>
 
<gov-flex class="gov-table-complex" size="s" direction="column">
    <gov-flex class="gov-table-complex__wrapper" direction="column">
        <div class="gov-table-complex__header">
            <div class="gov-table-complex__heading">
                {{ render '@heading' heading }}
                <small class="gov-table-complex__description">{{ description }}</small>
            </div>
            <gov-flex class="gov-table-complex__panel" justify-content="space-between" align-items="center">
                <div class="gov-table-complex__records">
                    {{ records }}
                </div>
                <gov-flex justify-content="flex-end" align-items="center" gap="s-nudge">
                    {{ render '@search' search }}
                    <gov-flex justify-content="flex-end" align-items="center" gap="xs">
                        {{#each panel2}}
                            {{ render '@button' this }}
                        {{/each}}
                    </gov-flex>
                </gov-flex>
            </gov-flex>
            <gov-flex class="gov-table-complex__actions" justify-content="space-between" align-items="center">
                <div class="gov-table-complex__records-selected">
                    {{ selected }}
                </div>
                <div>
                    {{#each actions}}
                        {{ render '@button' this }}
                    {{/each}}
                </div>
            </gov-flex>
        </div>
        {{ render '@table--selection' }}
    </gov-flex>
    <gov-flex class="gov-table-complex__pagination" direction="column-reverse" justify-content="flex-end" align-items="flex-start">
        <gov-flex class="gov-table-complex__per-page" justify-content="flex-end" align-items="center">
            <gov-form-select name="per-page" size="s">
                <option value="5" selected>5</option>
                <option value="10">10</option>
                <option value="25">25</option>
            </gov-form-select>
            <label>{{ pagination/text }}</label>
        </gov-flex>
        {{ render '@pagination' pagination merge=true }}
    </gov-flex>
</gov-flex>
 
{
  "heading": {
    "tag": "h3",
    "name": "Table Name",
    "classes": [
      "gov-table-complex__name"
    ]
  },
  "description": "Table description",
  "records": "X záznamů",
  "selected": "X vybraných záznamů",
  "pagination": {
    "size": "s",
    "current": "1",
    "total": "33",
    "text": "záznamů na stránku",
    "aria-label": "Stránkování tabulky"
  },
  "search": {
    "classes": [
      "gov-search--fixed-width"
    ],
    "size": "s",
    "color": "neutral",
    "input": {
      "placeholder": "Vyhledat v tabulce",
      "size": "s"
    },
    "button": [
      {
        "slot": "button",
        "size": "xs",
        "color": "primary",
        "type": "solid",
        "aria-label": "Vyhledat zadaný výraz",
        "native-type": "submit",
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "search"
        }
      }
    ]
  },
  "panel": [
    {
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Vyhledat v tabulce",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "search"
      }
    },
    {
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Filtrovat záznamy v tabulce",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "funnel"
      }
    },
    {
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Nastavení tabulky",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "gear"
      }
    }
  ],
  "panel2": [
    {
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Filtrovat záznamy v tabulce",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "funnel"
      }
    },
    {
      "color": "primary",
      "type": "base",
      "size": "s",
      "aria-label": "Nastavení tabulky",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "gear"
      }
    }
  ],
  "actions": [
    {
      "text": "Smazat",
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Smazat vybrané záznamy"
    },
    {
      "text": "Uložit",
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Uložit vybrané záznamy"
    },
    {
      "text": "Stáhnout",
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Stáhnout vybrané záznamy"
    },
    {
      "text": "Zrušit",
      "color": "primary",
      "type": "solid",
      "size": "s",
      "aria-label": "Zrušit výběr záznamů"
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";
@import "table-complex--variables";

$class: ".gov-table-complex";

#{$class} {
    &__wrapper {
        overflow: hidden;
        border: 1px solid var(--border-subtle);
    }
    &__name,
    &__description {
        margin: 0;
        color: var(--text-primary);
    }
    &__actions {
        color: var(--text-white-fixed);
        background-color: var(--background-primary);
        padding: var(--spacing-xs) var(--spacing-s);
    }
    &__per-page {
        width: 185px;
        white-space: nowrap;
    }

    // SIZES
    @each $size, $definitions in $table-sizes {
        &[size="#{$size}"] {
            gap: map-get($definitions, "gap");
            #{$class} {
                &__wrapper {
                    gap: map-get($definitions, "gap");
                    border-radius: map-get($definitions, "border-radius");
                }
                &__heading,
                &__panel {
                    margin-top: map-get($definitions, "gap");
                    padding: 0 map-get($definitions, "gap");
                }
                &__actions {
                    margin-top: map-get($definitions, "gap");
                    margin-bottom: calc(map-get($definitions, "gap") * -1);
                }
                &__name {
                    @include typography(map-get($definitions, "name"));
                }
                &__description {
                    @include typography(map-get($definitions, "description"));
                }
                &__records,
                &__actions {
                    @include typography(map-get($definitions, "records"));
                }
                &__pagination {
                    gap: map-get($definitions, "pagination-gap");
                    margin: map-get($definitions, "pagination-margin") 0;
                }
                &__per-page {
                    gap: map-get($definitions, "gap");
                    label {
                        @include typography(map-get($definitions, "description"));
                    }
                }
            }
        }
    }

    @include mq($from: md) {
        &__pagination {
            flex-direction: row !important;
            align-items: center !important;
        }
    }
}
  • URL: /components/raw/table-complex/table-complex.scss
  • Filesystem Path: src/components/organisms/table-complex/table-complex.scss
  • Size: 2.3 KB

No notes defined.