Gov Design System CE - Templates

Table: Empty 

<div class="gov-table" size="m">
    <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 colspan="5">
                    <gov-empty align="center" size="m">
                        <gov-icon slot="icon" name="empty-file" type="colored"></gov-icon>
                        <p slot="headline">Zde zatím nejsou žádné záznamy</p>
                        <p>Aby se zde zobrazily záznamy, musíte je nejprve přidat.</p>
                        <gov-button color="primary" size="l" type="solid">
                            Přidat záznam

                        </gov-button>
                    </gov-empty>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="gov-table" size="m">
    <table>
        <thead>
        <tr>
            {{#each empty/header }}
                <th{{#eq @index 2}} class="gov-table--align-right gov-table--nowrap"{{/eq}}>
                    {{~ this ~}}
                </th>
            {{/each}}
        </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5">
                    {{ render '@empty' empty/empty merge=true }}
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
{
  "default": {
    "header": [
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Dokument",
      "Objednání"
    ],
    "rows": [
      [
        "Hlavní město Praha",
        "Novomoravská 34",
        "1 384 732",
        "Praha.pdf"
      ],
      [
        "Brno",
        "Sedlcká 22",
        "400 566",
        "Brno_v2.pdf"
      ],
      [
        "Ostrava",
        "Nové Sasko 374",
        "284 765",
        "Ostrava.docx"
      ],
      [
        "Plzeň",
        "Jihočeských hrdinů 222",
        "185 599",
        "-"
      ],
      [
        "Liberec",
        "Česká 4678",
        "107 982",
        "Liberec.pdf"
      ]
    ]
  },
  "action": {
    "header": [
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Telefon",
      "Stav",
      ""
    ],
    "rows": [
      [
        "Hlavní město Praha",
        "Novomoravská 34",
        "1 384 732",
        "+420 789 345 123",
        "otevřeno",
        "success"
      ],
      [
        "Brno",
        "Sedlcká 22",
        "400 566",
        "+420 609 345 123",
        "neuvedeno",
        "neutral"
      ],
      [
        "Ostrava",
        "Nové Sasko 374",
        "284 765",
        "+420 789 345 221",
        "otevřeno",
        "success"
      ],
      [
        "Plzeň",
        "Jihočeských hrdinů 222",
        "185 599",
        "+420 890 345 356",
        "zavřeno",
        "error"
      ],
      [
        "Liberec",
        "Česká 4678",
        "107 982",
        "+420 789 367 123",
        "otevřeno",
        "success"
      ]
    ]
  },
  "selection": {
    "header": [
      "",
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Telefon",
      "Stav"
    ],
    "rows": [
      [
        "Hlavní město Praha",
        "Novomoravská 34",
        "1 384 732",
        "+420 789 345 123",
        "otevřeno",
        "success",
        "true",
        "highlight"
      ],
      [
        "Brno",
        "Sedlcká 22",
        "400 566",
        "+420 609 345 123",
        "neuvedeno",
        "neutral",
        "false"
      ],
      [
        "Ostrava",
        "Nové Sasko 374",
        "284 765",
        "+420 789 345 221",
        "otevřeno",
        "success",
        "false"
      ],
      [
        "Plzeň",
        "Jihočeských hrdinů 222",
        "185 599",
        "+420 890 345 356",
        "zavřeno",
        "error",
        "true",
        "highlight"
      ],
      [
        "Liberec",
        "Česká 4678",
        "107 982",
        "+420 789 367 123",
        "otevřeno",
        "success",
        "false"
      ]
    ]
  },
  "expansion": {
    "header": [
      "",
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Telefon",
      "Stav"
    ],
    "rows": [
      [
        "Hlavní město Praha",
        "Novomoravská 34",
        "1 384 732",
        "+420 789 345 123",
        "otevřeno",
        "success",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum a massa sodales accumsan quis ut magna. In hac habitasse platea dictumst. Proin nulla massa, convallis vel neque vel, laoreet vulputate metus. Pellentesque facilisis sapien sed ullamcorper ultrices. Phasellus facilisis lacinia erat, sed egestas elit elementum feugiat. Nulla facilisi. Fusce ullamcorper nibh vel pellentesque tempus. Quisque in viverra arcu."
      ],
      [
        "Brno",
        "Sedlcká 22",
        "400 566",
        "+420 609 345 123",
        "neuvedeno",
        "neutral"
      ],
      [
        "Ostrava",
        "Nové Sasko 374",
        "284 765",
        "+420 789 345 221",
        "otevřeno",
        "success"
      ],
      [
        "Plzeň",
        "Jihočeských hrdinů 222",
        "185 599",
        "+420 890 345 356",
        "zavřeno",
        "error"
      ],
      [
        "Liberec",
        "Česká 4678",
        "107 982",
        "+420 789 367 123",
        "otevřeno",
        "success"
      ]
    ]
  },
  "dynamic": {
    "header": [
      "",
      "",
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Telefon",
      "Stav"
    ],
    "rows": [
      [
        "Hlavní město Praha",
        "Novomoravská 34",
        "1 384 732",
        "+420 789 345 123",
        "otevřeno",
        "success"
      ],
      [
        "Brno",
        "Sedlcká 22",
        "400 566",
        "+420 609 345 123",
        "neuvedeno",
        "neutral"
      ],
      [
        "Ostrava",
        "Nové Sasko 374",
        "284 765",
        "+420 789 345 221",
        "otevřeno",
        "success"
      ],
      [
        "Plzeň",
        "Jihočeských hrdinů 222",
        "185 599",
        "+420 890 345 356",
        "zavřeno",
        "error"
      ],
      [
        "Liberec",
        "Česká 4678",
        "107 982",
        "+420 789 367 123",
        "otevřeno",
        "success",
        "true"
      ]
    ]
  },
  "empty": {
    "header": [
      "Název pobočky",
      "Adresa",
      "Číselný údaj",
      "Dokument",
      "Objednání"
    ],
    "empty": {
      "button": {
        "text": "Přidat záznam",
        "color": "primary",
        "type": "solid",
        "size": "l"
      }
    }
  },
  "button-dots": {
    "color": "primary",
    "type": "base",
    "size": "m",
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "three-dots-vertical"
    }
  },
  "list": [
    {
      "text": "Upravit",
      "color": "primary",
      "type": "base",
      "size": "m",
      "expanded": true,
      "role": "menuitem",
      "icon-end": {
        "slot": "icon-end",
        "type": "templates",
        "name": "pencil"
      }
    },
    {
      "text": "Smazat",
      "color": "primary",
      "type": "base",
      "size": "m",
      "expanded": true,
      "role": "menuitem",
      "icon-end": {
        "slot": "icon-end",
        "type": "templates",
        "name": "trash"
      }
    }
  ],
  "button-down": {
    "color": "primary",
    "type": "base",
    "size": "m",
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "chevron-down",
      "color": "primary",
      "size": "m"
    }
  },
  "button-up": {
    "color": "primary",
    "type": "base",
    "size": "m",
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "chevron-up",
      "color": "primary",
      "size": "m"
    }
  },
  "button-reservation": {
    "text": "Rezervovat",
    "color": "secondary",
    "type": "solid",
    "size": "xs",
    "expanded": true,
    "icon-end": {
      "slot": "icon-end",
      "type": "templates",
      "name": "chevron-right"
    }
  }
}
  • Content: 
    @import "../../../styles/mixins";
@import "table--variables";

$class: ".gov-table";

#{$class} {
    width: 100%;
    overflow-x: auto;

    table {
        table-layout: fixed;
        min-width: 100%;
        border-collapse: collapse;
    }
    table tr {
        &.gov-table--highlight td {
            background-color: var(--background-primary-subtle);
        }
    }
    table th, table td {
        border-bottom: 1px solid var(--border-subtlest);
        text-align: left;

        // MODIFIERS
        &#{$class} {
            &--align-right {
                text-align: right;
            }
            &--vertical-align-top {
                vertical-align: top;
            }
            &--border-right {
                border-right: 1px solid var(--border-subtlest);
            }
            &--border-left {
                border-left: 1px solid var(--border-subtlest);
            }
            &--border-bottom-none {
                border-bottom: none;
            }
            &--nowrap {
                white-space: nowrap;
            }
            &--fit-width {
                width: 1px;
            }
        }
    }
    table th {
        color: var(--text-primary);
        background-color: var(--background-neutral-subtlest);
    }
    table td {
        background-color: var(--background-neutral-white);
    }
    table tr.open td {
        padding: var(--spacing-s) var(--spacing-m);
    }

    summary::-webkit-details-marker {
        display: none;
    }

    // SIZES
    @each $size, $definitions in $table-sizes {
        &[size="#{$size}"] {
            table {
                border-bottom-left-radius: map-get($definitions, "border-radius");
                border-bottom-right-radius: map-get($definitions, "border-radius");
            }
            table th, table td {
                height: map-get($definitions, "height");
                padding: 0 map-get($definitions, "padding");
                @include typography(map-get($definitions, "font"));
            }
            table th {
                font-weight: 700;
            }
        }
    }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/molecules/table/table.scss
  • Size: 2.1 KB

No notes defined.