Gov Design System CE - Templates

Table: Expansion 

<div class="gov-table" size="m">
    <table>
        <thead>
            <tr>
                <th class="gov-table--fit-width"></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>
                <td class="gov-table--fit-content gov-table--border-right gov-table--border-bottom-none">
                    <gov-button color="primary" size="m" type="base">
                        <gov-icon type="templates" name="chevron-up" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </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 class="open">
                <td colspan="6">
                    <p>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.</p>
                </td>
            </tr>
            <tr>
                <td class="gov-table--fit-content gov-table--border-right">
                    <gov-button color="primary" size="m" type="base">
                        <gov-icon type="templates" name="chevron-down" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </td>
                <td>
                    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">
                    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-button color="primary" size="m" type="base">
                        <gov-icon type="templates" name="chevron-down" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </td>
                <td>
                    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">
                    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>
                <td class="gov-table--fit-content gov-table--border-right">
                    <gov-button color="primary" size="m" type="base">
                        <gov-icon type="templates" name="chevron-down" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </td>
                <td>
                    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">
                    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-button color="primary" size="m" type="base">
                        <gov-icon type="templates" name="chevron-down" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </td>
                <td>
                    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">
                    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>
 
<div class="gov-table" size="m">
    <table>
        <thead>
        <tr>
            <th class="gov-table--fit-width">{{ expansion/header.[0] }}</th>
            <th>{{ expansion/header.[1] }}</th>
            <th>{{ expansion/header.[2] }}</th>
            <th class="gov-table--align-right gov-table--nowrap">{{ expansion/header.[3] }}</th>
            <th>{{ expansion/header.[4] }}</th>
            <th>{{ expansion/header.[5] }}</th>
        </tr>
        </thead>
        <tbody>
        {{#each expansion/rows }}
            {{#if @first}}
                <tr>
                    <td class="gov-table--fit-content gov-table--border-right gov-table--border-bottom-none">
                        {{ render '@button' ../button-up }}
                    </td>
                    <td class="gov-table--nowrap">
                        {{this.[0]}}
                    </td>
                    <td>
                        <gov-link href="#" target="_blank" size="m">
                            {{this.[1]}}
                            <gov-icon type="templates" name="link-45deg"></gov-icon>
                        </gov-link>
                    </td>
                    <td class="gov-table--align-right gov-table--nowrap">
                        {{this.[2]}}
                    </td>
                    <td>
                        {{this.[3]}}
                    </td>
                    <td>
                        <gov-tag color="{{this.[5]}}" type="subtle" size="s" expanded>
                            {{this.[4]}}
                        </gov-tag>
                    </td>
                </tr>
                <tr class="open">
                    <td colspan="6">
                        <p>{{this.[6]}}</p>
                    </td>
                </tr>
            {{else}}
                <tr>
                    <td class="gov-table--fit-content gov-table--border-right">
                        {{ render '@button' ../button-down }}
                    </td>
                    <td>
                        {{this.[0]}}
                    </td>
                    <td>
                        <gov-link href="#" target="_blank" size="m">
                            {{this.[1]}}
                            <gov-icon type="templates" name="link-45deg"></gov-icon>
                        </gov-link>
                    </td>
                    <td class="gov-table--align-right">
                        {{this.[2]}}
                    </td>
                    <td>
                        {{this.[3]}}
                    </td>
                    <td>
                        <gov-tag color="{{this.[5]}}" type="subtle" size="s" expanded>
                            {{this.[4]}}
                        </gov-tag>
                    </td>
                </tr>
            {{/if}}
        {{/each}}
        </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.