테이블
호출 방식
페이지 로드가 완료되면 테이블이 자동으로 초기화됩니다. 동적으로 생성된 테이블의 경우 mdui.mutation()을 호출하여 초기화해야 합니다.
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>반응형
테이블 너비가 너무 넓으면 페이지에 가로 스크롤바가 생길 수 있습니다. .mdui-table 요소를 .mdui-table-fluid 요소로 감싸면 테이블 너비가 페이지 너비를 초과할 때 테이블이 수평 스크롤을 지원하게 됩니다.
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div><div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>열 정렬 방식
Material Design 가이드라인에 따라 테이블의 텍스트 열은 왼쪽 정렬, 숫자 열은 오른쪽 정렬해야 합니다.
mdui 테이블 열은 기본적으로 왼쪽 정렬을 사용합니다. 숫자 열의 <th> 태그에 .mdui-table-col-numeric 클래스를 추가하면 해당 열을 오른쪽 정렬할 수 있습니다.
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="mdui-table-col-numeric">age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>열 선택
.mdui-table 요소에 .mdui-table-selectable 클래스를 추가하면 각 행 앞에 체크박스가 추가됩니다.
체크박스를 선택하면 해당 행의 <tr> 요소에 .mdui-table-row-selected 클래스가 추가됩니다.
미리 <tr> 요소에 .mdui-table-row-selected 클래스를 추가하여 해당 행을 기본 선택 상태로 만들 수도 있습니다.
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-selectable">
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
>
Calories
</th>
<th class="mdui-table-col-numeric">Fat (g)</th>
<th class="mdui-table-col-numeric">Carbs (g)</th>
<th class="mdui-table-col-numeric">Protein (g)</th>
<th class="mdui-table-col-numeric">Sodium (mg)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
>
Calcium (%)
</th>
<th class="mdui-table-col-numeric">Iron (%)</th>
</tr>
</thead>
<tbody>
<tr class="mdui-table-row-selected">
<td>Frozen yogurt</td>
<td>159</td>
<td>6.0</td>
<td>24</td>
<td>4.0</td>
<td>87</td>
<td>14%</td>
<td>1%</td>
</tr>
<tr>
<td>Ice cream sandwich</td>
<td>237</td>
<td>9.0</td>
<td>37</td>
<td>4.3</td>
<td>129</td>
<td>8%</td>
<td>1%</td>
</tr>
<tr>
<td>Eclair</td>
<td>262</td>
<td>16.0</td>
<td>24</td>
<td>6.0</td>
<td>337</td>
<td>6%</td>
<td>7%</td>
</tr>
</tbody>
</table>
</div>동적으로 생성된 테이블
테이블이 동적으로 생성된 경우 mdui.mutation()을 호출하여 초기화해야 합니다.
테이블 속성을 동적으로 수정했다면 mdui.updateTables() 메서드를 호출하여 테이블을 다시 초기화해야 합니다. 이 메서드는 CSS 선택자(<table class="mdui-table"> 요소를 선택하기 위함), DOM 요소 또는 DOM 요소 배열을 매개변수로 받아 지정된 테이블만 다시 초기화할 수 있습니다. 매개변수를 전달하지 않으면 페이지의 모든 테이블을 다시 초기화합니다.