Table: Selection

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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>


        <div class="gov-table" size="m">
    <table>
        <thead>
        <tr>
            {{#each selection/header }}
                {{#if @first}}
                    <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>
                {{else}}
                    <th{{#eq @index 3}} class="gov-table--align-right gov-table--nowrap"{{/eq}}>
                        {{~ this ~}}
                    </th>
                {{/if}}
            {{/each}}
        </tr>
        </thead>
        <tbody>
        {{#each selection/rows }}
            <tr{{#with this.[7]}} class="gov-table--highlight"{{/with}}>
                <td class="gov-table--fit-content gov-table--border-right">
                    <gov-form-checkbox size="m" name="checkbox{{@index}}" value="{{this.[6]}}" no-label checked="{{this.[6]}}"></gov-form-checkbox>
                </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>
        {{/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"
    }
  }
}

File:

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

Handle: @table--selection
Variants (6): Default , Action , Dynamic , Empty , Expansion , Selection
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/table/table--selection.hbs
Referenced by (1): @table-complex--selected

No notes defined.