Gov Design System CE - Templates

Table Interface 

<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>
                <div>
                    <gov-button color="primary" size="s" type="base" aria-label="Vyhledat v tabulce">
                        <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>

                    </gov-button>
                    <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>
                </div>
            </gov-flex>
        </div>
        <div class="gov-table" size="s">
            <table>
                <thead>
                    <tr>
                        <th>Název pobočky</th>
                        <th>Adresa</th>
                        <th class="gov-table--align-right gov-table--nowrap">Číselný údaj</th>
                        <th>Dokument</th>
                        <th>Objednání</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="gov-table--nowrap">
                            Hlavní město Praha
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-link href="#" target="_blank" size="s">
                                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>
                            <gov-link href="#" target="_blank" size="s">
                                <gov-icon type="templates" name="file-earmark-text-fill"></gov-icon>
                                Praha.pdf
                            </gov-link>
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-button color="secondary" size="xs" type="solid" expanded="true">
                                Rezervovat

                                <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                            </gov-button>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--nowrap">
                            Brno
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-link href="#" target="_blank" size="s">
                                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>
                            <gov-link href="#" target="_blank" size="s">
                                <gov-icon type="templates" name="file-earmark-text-fill"></gov-icon>
                                Brno_v2.pdf
                            </gov-link>
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-button color="secondary" size="xs" type="solid" expanded="true">
                                Rezervovat

                                <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                            </gov-button>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--nowrap">
                            Ostrava
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-link href="#" target="_blank" size="s">
                                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>
                            <gov-link href="#" target="_blank" size="s">
                                <gov-icon type="templates" name="file-earmark-text-fill"></gov-icon>
                                Ostrava.docx
                            </gov-link>
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-button color="secondary" size="xs" type="solid" expanded="true">
                                Rezervovat

                                <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                            </gov-button>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--nowrap">
                            Plzeň
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-link href="#" target="_blank" size="s">
                                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>
                            <gov-link href="#" target="_blank" size="s">
                                <gov-icon type="templates" name="file-earmark-text-fill"></gov-icon>
                                -
                            </gov-link>
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-button color="secondary" size="xs" type="solid" expanded="true">
                                Rezervovat

                                <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                            </gov-button>
                        </td>
                    </tr>
                    <tr>
                        <td class="gov-table--nowrap">
                            Liberec
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-link href="#" target="_blank" size="s">
                                Č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>
                            <gov-link href="#" target="_blank" size="s">
                                <gov-icon type="templates" name="file-earmark-text-fill"></gov-icon>
                                Liberec.pdf
                            </gov-link>
                        </td>
                        <td class="gov-table--nowrap">
                            <gov-button color="secondary" size="xs" type="solid" expanded="true">
                                Rezervovat

                                <gov-icon type="templates" name="chevron-right" slot="icon-end"></gov-icon>
                            </gov-button>
                        </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>
                <div>
                    {{#each panel}}
                        {{ render '@button' this }}
                    {{/each}}
                </div>
            </gov-flex>
        </div>
        {{ render '@table--default' }}
    </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: 
    $size-s: "s";
$size-m: "m";
$size-l: "l";

$table-sizes: (
    $size-s: (
        border-radius: var(--corner-radius-s),
        gap: var(--spacing-s),
        name: "headline-xs",
        description: "body-xs",
        records: "body-m",
        pagination-margin: var(--spacing-xs-nudge),
        pagination-gap: var(--spacing-l),
    ),
    $size-m: (
        border-radius: var(--corner-radius-m),
        gap: var(--spacing-m),
        name: "headline-s",
        description: "body-s",
        records: "body-m",
        pagination-margin: var(--spacing-s-nudge),
        pagination-gap: var(--spacing-l),
    ),
    $size-l: (
        border-radius: var(--corner-radius-l),
        gap: var(--spacing-l),
        name: "headline-m",
        description: "body-m",
        records: "body-l",
        pagination-margin: var(--spacing-m-nudge),
        pagination-gap: var(--spacing-xl),
    ),
);
  • URL: /components/raw/table-complex/table-complex--variables.scss
  • Filesystem Path: src/components/organisms/table-complex/table-complex--variables.scss
  • Size: 904 Bytes
  • 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.