본문바로가기

Alopex UI

Component

Table

Basic

Table 컴포넌트 입니다. class="Table"

table cell의 너비를 조정하기 위해서는 colgroup의 col태그를 사용하여 일괄 적용합니다. 너비 스타일이 설정되지 않는 경우, 각 테이블 셀의 데이터의 길이에 따라 너비가 자동 설정됩니다. 추가적으로 스타일을 변경하고 싶은 경우에는, 퍼블리싱 가이드를 참고하여 스타일을 변경할 수 있습니다.

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 
<table class="Table">
	<colgroup>
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th>1st Header </th>
			<th>2nd Header </th>
			<th>3rd Header </th>
			<th>4th Header </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3 </td>
			<td> Row 1, Col 4 </td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3 </td>
			<td> Row 2, Col 4 </td>
		</tr>
	</tbody>
</table>

Attributes

class

  • "Table-wrapper"
    • Alopex UI table 컴포넌트 사용 시 wrapper를 지정합니다.
  • "Table-scroller"
    • Alopex UI table 컴포넌트 사용 시 scroller를 지정합니다.

data-editable

각 셀에 해당하는 td 영역에서 사용하며, "true" 값으로 선언 될 경우 컬럼의 셀은 편집 가능해집니다.

  • Type: {boolean}
    • "false" (default) : inline 편집 불가능합니다.
First Name Last Name Organization Email
David Howard SK C&C dhoward@sk.com
Jerry Guynes SK C&C guynes@sk.com 
<button id="editBtn1" class="Button Margin-bottom-10">New Contact</button>
<table id="contact" class="Table">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Organization</th>
			<th>Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-editable="true">David</td>
			<td data-editable="true">Howard</td>
			<td data-editable="true">SK C&C</td>
			<td data-editable="true">dhoward@sk.com</td>
		</tr>
		<tr>
			<td data-editable="true">Jerry</td>
			<td data-editable="true">Guynes</td>
			<td data-editable="true">SK C&C</td>
			<td data-editable="true">guynes@sk.com</td>
		</tr>
	</tbody>
</table>
<button id="editBtn2" class="Button">Save Changes</button>
<button id="editBtn3" class="Button">Discard Changes</button>

$('#contact').find('.af-table-editor').each(function() {
	this.value = this.innerHTML;
});
$('#editBtn1').click(function() {
	addContact();
});
$('#editBtn2').click(function() {
	save();
});
$('#editBtn3').click(function() {
	discard();
});

function addContact() {
	$('#contact > tbody')
	.append('<tr><td data-editable="true"></td><td data-editable="true"></td><td data-editable="true"></td><td data-editable="true"></td></tr>');
	$('#contact').refresh();
}

function save() {
	$('#contact').find('[class*=af-edited]').each(function() {
	this.value = this.innerHTML;
	$(this).removeClass('af-edited');
	});
}

function discard() {
	$('#contact').find('[class*=af-edited]').each(function() {
	this.innerHTML = (this.value == undefined)?"": this.value;
	$(this).removeClass('af-edited');
	});
}

data-resizable

컬럼 헤더에서 사용하며 컬럼을 리사이징 할 수 있습니다.

  • Type: {boolean}
    • “false” (default) : 리사이즈 기능을 사용하지 않습니다.

data-scroller-use

Table 컴포넌트는 기본적으로 Wrapper 및 Scroller 엘리먼트로 감싸지게 됩니다.

  • Type: {boolean}
    • "false" : Wrapper 와 Scroller 엘리먼트를 생성하지 않고자 할 때 사용합니다.
First Name Last Name Organization Email
David Howard SK C&C dhoward@sk.com
Jerry Guynes SK C&C guynes@sk.com 

<table class="Table" data-scroller-use="false">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Organization</th>
			<th>Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>David</td>
			<td>Howard</td>
			<td>SK C&C</td>
			<td>dhoward@sk.com</td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>Guynes</td>
			<td>SK C&C</td>
			<td>guynes@sk.com</td>
		</tr>
	</tbody>
</table>

data-sortable

컬럼 헤더에 선언되며, 컬럼 데이터를 정렬 가능하게 변경합니다. 컬럼의 헤더를 클릭 시 데이터의 타입에 따라 정렬됩니다.

  • Type: {string}
    • "string" (default)
      • 데이터 타입을 문자 순서대로 정렬합니다.
    • "date"
      • 날짜 타입으로 정렬합니다. 날짜 데이터 포맷은 MM/DD/YYYY으로 입력해야 합니다.
    • "number"
      • 컬럼의 데이터 타입을 숫자 정렬합니다.(음수 및 소수 지원)
<table class="Table">
	<thead>
		<tr>
			<th data-sortable="string">String</th>
			<th data-sortable="date">Date</th>
		</tr>
	</thead>
	...
</table>

No. First Name Last Name Birthdate Height / Weight
1 June Park 11/22/1976 180 / 78
2 Ji-hyun Lim 06/17/1982 170 / 00
3 Jun Seok Lee 02/09/1983 183 / 80
4 Si-myung Yang 12/05/1982 183 / 85
5 Sang-Hoon Han 02/09/1984 174 / 55
6 Sang-jun Yoon 06/17/1984 188 / 90
7 Min-young Song 03/05/1986 176 / 60
8 Bong-chan Kim 03/05/1986 178 / 60
9 Seo-young Ahn 03/05/1983 178 / 60
10 Yae-ji Lee 03/05/1990 163 / 00 
<table class="Table"  id="table1">
	<colgroup>
		<col style="width:80px;">
		<col />
		<col />
		<col />
		<col />
		<col style="width:100px;">
	</colgroup>
	<thead>
		<tr>
			<th id="id" data-sortable="number">No.</th>
			<th data-sortable="string">First Name</th>
			<th data-sortable="string">Last Name</th>
			<th data-sortable="date">Birthdate</th>
			<th id="weight" data-sort-function="compare_weight">Height / Weight</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>June</td>
			<td>Park</td>
			<td>11/22/1976</td>
			<td>180 / 78</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>2</td>
			<td>Ji-hyun</td>
			<td>Lim</td>
			<td>06/17/1982</td>
			<td>170 / 00</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jun Seok</td>
			<td>Lee</td>
			<td>02/09/1983</td>
			<td>183 / 80</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>4</td>
			<td>Si-myung</td>
			<td>Yang</td>
			<td>12/05/1982</td>
			<td>183 / 85</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>5</td>
			<td>Sang-Hoon</td>
			<td>Han</td>
			<td>02/09/1984</td>
			<td>174 / 55</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>6</td>
			<td>Sang-jun</td>
			<td>Yoon</td>
			<td>06/17/1984</td>
			<td>188 / 90</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>7</td>
			<td>Min-young</td>
			<td>Song</td>
			<td>03/05/1986</td>
			<td>176 / 60</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>

		<tr>
			<td>8</td>
			<td>Bong-chan</td>
			<td>Kim</td>
			<td>03/05/1986</td>
			<td>178 / 60</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>9</td>
			<td>Seo-young</td>
			<td>Ahn</td>
			<td>03/05/1983</td>
			<td>178 / 60</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
		<tr>
			<td>10</td>
			<td>Yae-ji</td>
			<td>Lee</td>
			<td>03/05/1990</td>
			<td>163 / 00</td>
			<td><input type="button" class="Button" value="more"></td>
		</tr>
	</tbody>
</table>

//오름차순 정렬은 'asc'를 내림 차순 정렬은 'desc'
var header = $('#id')[0];
$('#table1').tableSort(header, 'desc');

function compare_height(a, b) {
	var a = parseInt(a[0].split('/')[0]);
	var b = parseInt(b[0].split('/')[0]);
	return (a-b);
}
/**
* @param a Array of array which contains cell content and table row. a[0] indicates string-typed cell content.
*/
function compare_weight(a, b) {
	//console.log(a);
	var a = parseInt(a[0].split('/')[1]);
	var b = parseInt(b[0].split('/')[1]);
	return (a-b);
}

@media screen and (max-width:500px) {
	col {display:none;}
	col:first-child {display:block;}
}

data-sort-function

셀 내 데이터를 이용하여 사용자 정의 소팅 함수를 구현할 때 사용됩니다. 위 data-sortable 예제에서도 확인하실 수 있습니다.

  • Type: {string}
    • "functionName" : 사용자 함수명
<table class="Table">
	<thead>
		<tr>
			<th data-sort-function="compare">String</th>
		</tr>
	</thead>
	...
</table>
function compare(a, b) {
	return (a-b);
}
Options

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

scrolleruse

Functions

.clear()

Table 내의 모든 데이터를 지웁니다. 테이블 태그 내에 헤더가 아닌 TR태그를 DOM에서 삭제합니다.

Table with THEAD head
Head1 Head2 Head3 Head4
Row 1, Cell1 Row 1, Cell2 Row 1, Cell3 Row 1, Cell4
Row 2, Cell1 Row 2, Cell2 Row 2, Cell3 Row 2, Cell4
Row 3, Cell1 Row 3, Cell2 Row 3, Cell3 Row 3, Cell4
Row 4, Cell1 Row 4, Cell2 Row 4, Cell3 Row 4, Cell4
Row 5, Cell1 Row 5, Cell2 Row 5, Cell3 Row 5, Cell4


Table with TH head
Head1 Head2 Head3 Head4
Row 1, Cell1 Row 1, Cell2 Row 1, Cell3 Row 1, Cell4
Row 2, Cell1 Row 2, Cell2 Row 2, Cell3 Row 2, Cell4
Row 3, Cell1 Row 3, Cell2 Row 3, Cell3 Row 3, Cell4
Row 4, Cell1 Row 4, Cell2 Row 4, Cell3 Row 4, Cell4
Row 5, Cell1 Row 5, Cell2 Row 5, Cell3 Row 5, Cell4 
<span><b>Table with THEAD head</b></span><br/>
<button id="btn1" class="Button Margin-bottom-10">Clear</button>
<table id="el" class="Table">
	<thead>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 1, Cell1</td>
			<td>Row 1, Cell2</td>
			<td>Row 1, Cell3</td>
			<td>Row 1, Cell4</td>
		</tr>
		<tr>
			<td>Row 2, Cell1</td>
			<td>Row 2, Cell2</td>
			<td>Row 2, Cell3</td>
			<td>Row 2, Cell4</td>
		</tr>
		<tr>
			<td>Row 3, Cell1</td>
			<td>Row 3, Cell2</td>
			<td>Row 3, Cell3</td>
			<td>Row 3, Cell4</td>
		</tr>
		<tr>
			<td>Row 4, Cell1</td>
			<td>Row 4, Cell2</td>
			<td>Row 4, Cell3</td>
			<td>Row 4, Cell4</td>
		</tr>
		<tr>
			<td>Row 5, Cell1</td>
			<td>Row 5, Cell2</td>
			<td>Row 5, Cell3</td>
			<td>Row 5, Cell4</td>
		</tr>
	</tbody>
</table>
<br><br>
<span><b>Table with TH head</b></span><br/>
<button id="btn2" class="Button Margin-bottom-10">Clear</button>
<table id="el2" class="Table">
	<tr>
		<th>Head1</th>
		<th>Head2</th>
		<th>Head3</th>
		<th>Head4</th>
	</tr>
	<tr>
		<td>Row 1, Cell1</td>
		<td>Row 1, Cell2</td>
		<td>Row 1, Cell3</td>
		<td>Row 1, Cell4</td>
	</tr>
	<tr>
		<td>Row 2, Cell1</td>
		<td>Row 2, Cell2</td>
		<td>Row 2, Cell3</td>
		<td>Row 2, Cell4</td>
	</tr>
	<tr>
		<td>Row 3, Cell1</td>
		<td>Row 3, Cell2</td>
		<td>Row 3, Cell3</td>
		<td>Row 3, Cell4</td>
	</tr>
	<tr>
		<td>Row 4, Cell1</td>
		<td>Row 4, Cell2</td>
		<td>Row 4, Cell3</td>
		<td>Row 4, Cell4</td>
	</tr>
	<tr>
		<td>Row 5, Cell1</td>
		<td>Row 5, Cell2</td>
		<td>Row 5, Cell3</td>
		<td>Row 5, Cell4</td>
	</tr>
</table>

$('#btn1').click(function() {
	$('#el').clear();
});
$('#btn2').click(function() {
	$('#el2').clear();
});

.getOptions()

Table에 설정된 옵션값을 모두 가져올 수 있습니다.

  • Return {object}
    • object
      • Table에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//Table에 설정된 모든옵션값을 가져옵니다.
$('#Table').getOptions();

.hideColumn(index)

  • index
    • index를 이용해 해당 컬럼을 숨깁니다.

.refresh()

동적으로 추가된 element를 보여지게 합니다.

.setOptions(options)

Table에 동적으로 옵션을 설정합니다.

  • Parameters
    • options {object}
      • Table에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#Table').setOptions({
	scrolleruse: true,
});

.showColumn(index)

  • index
    • 숨겨져있던 컬럼을 보여줍니다.

.tableSort(header, orderBy)

header를 기준으로 오름차순 'asc', 내림차순 'desc' 정렬 할 수 있습니다. 이때, 해당하는 header 요소에 id 속성 값과 data-sortable 속성 값을 사용하여야 합니다.

First Name Last Name Organization Email
David Howard SK C&C dhoward@sk.com
Jerry Guynes SK C&C guynes@sk.com 
<table id="contact1" class="Table">
	<thead>
		<tr>
			<th id="hd" data-sortable="string">First Name</th>
			<th>Last Name</th>
			<th>Organization</th>
			<th>Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>David</td>
			<td>Howard</td>
			<td>SK C&C</td>
			<td>dhoward@sk.com</td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>Guynes</td>
			<td>SK C&C</td>
			<td>guynes@sk.com</td>
		</tr>
	</tbody>
</table>

var header1 = $('#hd')[0];
 $('#contact1').tableSort(header1, 'asc');

Extra Example

Scrolling

data-scroll 속성의 값을 "all"로 설정하면, 테이블 전체가 스크롤된다. 스크롤 기능을 사용할 경우, 테이블의 wrapper 크기(스크롤 되는 테이블의 크기) 조정은 data-height와 data-width를 통해 조절합니다. CSS3 flexbox를 사용하는 경우에는 별도의 크기를 조절하지 않아도, 지정한 영역을 다 채우도록 구현되어 있습니다. (box-flex 속성 사용)

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 
<table class="Table" data-height="200px" data-scroll="all">
	<thead>
		<tr>
			<th data-sortable="string">1st Header</th>
			<th>2nd Header</th>
			<th>3rd Header</th>
			<th>4th Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
	</tbody>
</table>

Header Fix with vertical scrolling

이 예제는 우선 data-scroll 속성값을 body로 지정하여, 헤더부분은 고정하고 바디영역만 스크롤됩니다. 또한 data-width 속성값을 "80%"를 사용하여 table wrapper 크기를 조정하였습니다.

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 
<table data-highlight="true" class="Table" data-height="200px" data-width="80%" data-scroll="body">
	<colgroup>
		<col style="width:150px;" />
		<col style="width:150px;" />
		<col style="width:150px;"/>
		<col />
	</colgroup>
	<thead>
		<tr>
			<th data-sortable="string">1st Header</th>
			<th>2nd Header</th>
			<th>3rd Header</th>
			<th>4th Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
		</tr>
	</tbody>
</table>

Header Fix with horizontal and vertical scrolling

이번 예제는 위의 예제에서 테이블 가로 너비 크기를 wrapper 가로 너비 크기보다 크게 설정(width:820px 로 설정)할 경우, 헤더가 고정된 상태에서 가로 세로 스크롤이 되는 것을 보여주는 예제입니다.

1st Header 2nd Header 3rd Header 4th Header 5th Header 6th Header 7th Header 8th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4 Row 1, Col 5 Row 1, Col 6 Row 1, Col 7 Row 1, Col 8
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4 Row 2, Col 5 Row 2, Col 6 Row 2, Col 7 Row 2, Col 8
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4 Row 3, Col 5 Row 3, Col 6 Row 3, Col 7 Row 3, Col 8 long sentence test
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3 Row 4, Col 4 Row 4, Col 5 Row 4, Col 6 Row 4, Col 7 Row 4, Col 8
Row 5, Col 1 Row 5, Col 2 Row 5, Col 3 Row 5, Col 4 Row 5, Col 5 Row 5, Col 6 Row 5, Col 7 Row 5, Col 8
Row 6, Col 1 Row 6, Col 2 Row 6, Col 3 Row 6, Col 4 Row 6, Col 5 Row 6, Col 6 Row 6, Col 7 Row 6, Col 8
Row 7, Col 1 Row 7, Col 2 Row 7, Col 3 Row 7, Col 4 Row 7, Col 5 Row 7, Col 6 Row 7, Col 7 Row 7, Col 8
Row 8, Col 1 Row 8, Col 2 Row 8, Col 3 Row 8, Col 4 Row 8, Col 5 Row 8, Col 6 Row 8, Col 7 Row 8, Col 8
Row 9, Col 1 Row 9, Col 2 Row 9, Col 3 Row 9, Col 4 Row 9, Col 5 Row 9, Col 6 Row 9, Col 7 Row 9, Col 8
Row 10, Col 1 Row 10, Col 2 Row 10, Col 3 Row 10, Col 4 Row 10, Col 5 Row 10, Col 6 Row 10, Col 7 Row 10, Col 8
Row 11, Col 1 Row 11, Col 2 Row 11, Col 3 Row 11, Col 4 Row 11, Col 5 Row 11, Col 6 Row 11, Col 7 Row 11, Col 8 
<table class="Table" data-height="250px" data-scroll="body" style="width:820px;">
	<colgroup>
		<col style="width:100px;" />
		<col style="width:100px;" />
		<col style="width:100px;"/>
		<col />
		<col />
		<col />
		<col style="width:100px;" />
		<col style="width:100px;" />
	</colgroup>
	<thead>
		<tr>
			<th data-sortable="string">1st Header </th>
			<th>2nd Header </th>
			<th>3rd Header </th>
			<th>4th Header </th>
			<th>5th Header </th>
			<th>6th Header </th>
			<th>7th Header </th>
			<th>8th Header </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> Row 1, Col 1</td>
			<td> Row 1, Col 2</td>
			<td> Row 1, Col 3</td>
			<td> Row 1, Col 4</td>
			<td> Row 1, Col 5</td>
			<td> Row 1, Col 6</td>
			<td> Row 1, Col 7</td>
			<td> Row 1, Col 8</td>
		</tr>
		<tr>
			<td> Row 2, Col 1</td>
			<td> Row 2, Col 2</td>
			<td> Row 2, Col 3</td>
			<td> Row 2, Col 4</td>
			<td> Row 2, Col 5</td>
			<td> Row 2, Col 6</td>
			<td> Row 2, Col 7</td>
			<td> Row 2, Col 8</td>
		</tr>
		<tr>
			<td> Row 3, Col 1</td>
			<td> Row 3, Col 2</td>
			<td> Row 3, Col 3</td>
			<td> Row 3, Col 4</td>
			<td> Row 3, Col 5</td>
			<td> Row 3, Col 6</td>
			<td> Row 3, Col 7</td>
			<td> Row 3, Col 8 long sentence test</td>
		</tr>
		<tr>
			<td> Row 4, Col 1</td>
			<td> Row 4, Col 2</td>
			<td> Row 4, Col 3</td>
			<td> Row 4, Col 4</td>
			<td> Row 4, Col 5</td>
			<td> Row 4, Col 6</td>
			<td> Row 4, Col 7</td>
			<td> Row 4, Col 8</td>
		</tr>
		<tr>
			<td> Row 5, Col 1</td>
			<td> Row 5, Col 2</td>
			<td> Row 5, Col 3</td>
			<td> Row 5, Col 4</td>
			<td> Row 5, Col 5</td>
			<td> Row 5, Col 6</td>
			<td> Row 5, Col 7</td>
			<td> Row 5, Col 8</td>
		</tr>
		<tr>
			<td> Row 6, Col 1</td>
			<td> Row 6, Col 2</td>
			<td> Row 6, Col 3</td>
			<td> Row 6, Col 4</td>
			<td> Row 6, Col 5</td>
			<td> Row 6, Col 6</td>
			<td> Row 6, Col 7</td>
			<td> Row 6, Col 8</td>
		</tr>
		<tr>
			<td> Row 7, Col 1</td>
			<td> Row 7, Col 2</td>
			<td> Row 7, Col 3</td>
			<td> Row 7, Col 4</td>
			<td> Row 7, Col 5</td>
			<td> Row 7, Col 6</td>
			<td> Row 7, Col 7</td>
			<td> Row 7, Col 8</td>
		</tr>
		<tr>
			<td> Row 8, Col 1</td>
			<td> Row 8, Col 2</td>
			<td> Row 8, Col 3</td>
			<td> Row 8, Col 4</td>
			<td> Row 8, Col 5</td>
			<td> Row 8, Col 6</td>
			<td> Row 8, Col 7</td>
			<td> Row 8, Col 8</td>
		</tr>
		<tr>
			<td> Row 9, Col 1</td>
			<td> Row 9, Col 2</td>
			<td> Row 9, Col 3</td>
			<td> Row 9, Col 4</td>
			<td> Row 9, Col 5</td>
			<td> Row 9, Col 6</td>
			<td> Row 9, Col 7</td>
			<td> Row 9, Col 8</td>
		</tr>
		<tr>
			<td> Row 10, Col 1</td>
			<td> Row 10, Col 2</td>
			<td> Row 10, Col 3</td>
			<td> Row 10, Col 4</td>
			<td> Row 10, Col 5</td>
			<td> Row 10, Col 6</td>
			<td> Row 10, Col 7</td>
			<td> Row 10, Col 8</td>
		</tr>
		<tr>
			<td> Row 11, Col 1</td>
			<td> Row 11, Col 2</td>
			<td> Row 11, Col 3</td>
			<td> Row 11, Col 4</td>
			<td> Row 11, Col 5</td>
			<td> Row 11, Col 6</td>
			<td> Row 11, Col 7</td>
			<td> Row 11, Col 8</td>
		</tr>
	</tbody>
</table>

Information icon & Required field

이번 예제는 th테그 안에 information icon 또는 Required field을 표시하는것을 보여주는 예제 입니다.

*항목
한개이상 선택하세요.
체크박스
항목 검색
검색조건
~
검색조건 
<table class="Table Form-type">
	<colgroup>
		<col style="width:100px"/>
		<col />
		<col style="width:100px"/>
		<col />
		<col style="width:80px"/>
	</colgroup>
	<tbody>
		<tr>
			<th><span class="Color-danger Padding-right-5">*</span>항목</th>
			<td>
				<select class="Select">
					<option>옵션을 선택해주세요</option>
				</select>
			</td>
			<th>
				<span class="Icon Exclamation-sign"></span>
				<div class="Tooltip">한개이상 선택하세요.</div>
				<span class="Margin-left-5 Display-inblock">체크박스</span>
			</th>
			<td>
				<label class="ImageCheckbox">
					<input class="Checkbox" type="checkbox" name="chk1" value = "check1" checked="checked">Checked
				</label>
				<label class="ImageCheckbox">
					<input class="Checkbox" type="checkbox" name="chk2" value = "check2">Unchecked
				</label>
			</td>
			<th rowspan="3">
				<button class="Button Warning">검색</button>
				<button class="Button Default Margin-top-5">삭제</button>
			</th>
		</tr>
		<tr>
			<th>항목</th>
			<td>
				<select class="Select Margin-right-5">
					<option>All</option>
				</select>
				<input class="Textinput">
			</td>
			<th>검색</th>
			<td>
				<label class="ImageRadio">
					<input class="Radio" name="radio2" value="value1">radio1
				</label>
				<label class="ImageRadio">
					<input class="Radio" name="radio2" value="value1">radio1
				</label>
			</td>
		</tr>
		<tr>
			<th>검색조건</th>
			<td>
				<div class="Daterange">
					<div class="Startdate Dateinput">
							<input>
					</div>
					~
					<div class="Enddate Dateinput">
							<input>
					</div>
				</div>
			</td>
			<th>검색조건</th>
			<td>
				<input class="Textinput Margin-right-5" placeholder="검색어를 입력하세요"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
			</td>
		</tr>
	</tbody>
</table>

본문 상단으로 이동

This Site created with Alopex UI

Icon licensed under CC BY 3.0

Copyright © 2020 SK Holdings C&C. All rights reserved.