# table

The component which is used to display several data in the form of table.

- Category : Table
- Property(Table):
1. Row & Column(Number) - Adjust the number of rows and columns.
![Table-The number of rows and columns][table-02]
1. Cell Width & Height - If drag the red handler of table with mouse, you can adjust the size of each cell.
![Table-The size of rows and columns][table-03]

- Property(Cell):
1. Border Style - Change the thickness and color of border of the selected cell. After enter the style value, type the button of cell in which will apply it among ![Table-셀 스타일 종류][table-04].
![Table-Cell style][table-05]
1. Border Type - Change the type of line of the selected cell. After select the border type, type the button of cell in which will apply it among ![Table-셀 스타일 종류][table-04].  
__(!!Apply cell border and table border differently.)__
1. Merge Cells - Merge the selected cells. (Apply to the neighboring cells only)
1. Split Cells - Unmerge the cells.
1. Delete Row - Delete the selected row.
![Table-Delete the cell row][table-06]
1. Delete Column - Delete the selected column.
![Table-Delete the cell column][table-07]
1. Insert Above - Insert a new cell on the top of the selected cell.
![Table-Insert on the top of cell][table-08]
1. Insert Below - Insert a new cell on the bottom of the selected cell.
![Table-Insert on the bottom of cell][table-09]
1. Insert Left - Insert a new cell on the left of the selected cell.
![Table-Insert on the left of cell][table-10]
1. Insert Right - Insert a new cell on the right of the selected cell.
![Table-Insert on the right of cell][table-11]
1. Distribute Horizontally - Make the width of the selected columns be the same.
![Table-Make the cell width the same][table-12]
1. Distribute Vertically - Make the height of the selected rows the same.
![Table-Make the cell height the same][table-13]
1. Data Key - The field name of data header when mapping the data in table. DataKey must be entered as the field name rather than the number of column.
1. Data Index - The location of data row when mapping the data in table. DataIndex makes the start number of data except the header as 0.  
![Table-데이터 예시][table-14]  
When receive the data as in the above image, if want to display the data of ‘01-03’ of Date, you can enter DataKey = Date, DataIndex = 2.



[table-01]: ../images/table-01.png

[table-02]: ../images/table-02.png

[table-03]: ../images/table-03.png

[table-04]: ../images/table-04.png

[table-05]: ../images/table-05.png

[table-06]: ../images/table-06.png

[table-07]: ../images/table-07.png

[table-08]: ../images/table-08.png

[table-09]: ../images/table-09.png

[table-10]: ../images/table-10.png

[table-11]: ../images/table-11.png

[table-12]: ../images/table-12.png

[table-13]: ../images/table-13.png

[table-14]: ../images/table-14.png
