Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Table

    행과 헤더 스타일을 지원하는 데이터 테이블.

    Basic

    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
       
<table class="ga-table">
    <thead>
       <tr>
          <th>column</th>
           ...
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>column value</td>
           ...
       </tr>
     </tbody>
</table>

    Single Rows

    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
       
<table class="ga-table single">
    <thead>
       ...
    </thead>
    <tbody>
       ...
     </tbody>
</table>

    Table Label

    Table Title
    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
       
<table class="ga-table labeled">
    <thead>
       ...
    </thead>
    <tbody>
       ...
     </tbody>
</table>

    Footer + Pagination

    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
    1
    2
    3
    4
    5
       
<table class="ga-table">
    <thead>
       ...
    </thead>
    <tbody>
       ...
     </tbody>
    <tfoot>
       <!-- <pagination /> --> 
     </tfoot>
</table>

    Table with Form Element

    Input
    Select
    ChoiceChoice 1
    Choice 2
    ExecuteCancel
       
<table class="ga-table structured">
    <tbody>
       <tr>
          <td>...</td>
          <td>...</td>
          ...
       </tr>
       ...
     </tbody>
</table>

    tables

    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
       
<table class="ga-table"> ... </table>
<table class="ga-table"> ... </table>

    table column count

    Evenly divide columns by the specified count (10-step percentage split)
    NameAgeJob
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
    NameAgeJobLorem
    John Doe11StudentLorem ipsum dolor sit amet, consectetur adipisicing elit.
    Jane Roe17College StudentLorem ipsum dolor sit amet, consectetur adipisicing elit.
    Alex Kim31Graduate StudentLorem ipsum dolor sit amet, consectetur adipisicing elit.
       
<!-- Evenly divided column layout. --> 
<!-- two, three, four, five... up to ten can be applied via class --> 
<table class="ga-table column three"> ... </table>
<table class="ga-table column four"> ... </table>

    table + grid - column width

    Name (Auto)Age (Column 6)Job (Students only) (Column 1)
    John Doe11Student
    Jane Roe17College Student
    Alex Kim31Graduate Student
       
<!-- Grid system column composition. --> 
<!-- Apply col-{grid count} on header columns --> 

<table class="ga-table">
    <thead>
       <tr>
          <th class="col-1">...</th>
          <th class="col-6">...</th>
          ...
       </tr>
       ...
     </thead>
    <tbody>
       ...
     </tbody>
</table>