GRID

Grid Header

1 line header

• height 상,하 라인포함 44px

          
    <div id="grid" class="grid"></div>
    <script>
      const grid = new Grid({
        el: document.getElementById('grid'),
        data: [
        ],
        scrollX: false,
        scrollY: false,
        header : {
          height: 44
        },
        minRowHeight : 44,
        rowHeaders: [
          {
            type: 'checkbox',
            header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
            width: 44,
            renderer: {
              type: CheckboxRenderer
            },
          },
          {
            header: 'NO',
            type: 'rowNum',
            width: 49,
          },
        ],
        columns: [
          {
            header: '상태',
            name: 'state',
            width: 53,
            align : 'center',
            renderer : {
              type : StateRenderer
            }
          },
          {
            header: '발령일자',
            name: 'date1',
            align : 'center',
          },
          {
            header: '부서명',
            name: 'department',
            align : 'left',
          },
          {
            header: '기본급',
            name: 'salary',
            align : 'right',
          },
          {
            header: '이름',
            name: 'name',
            align : 'center',
          },
          {
            header: '직책',
            name: 'position1',
            align : 'center',
          },
          {
            header: '직위',
            name: 'position2',
            align : 'center',
          },
          {
            header: '직급',
            name: 'position3',
            align : 'center',
          },
          {
            header: '입사일',
            name: 'date2',
            align : 'center',
          }
        ]
      });
    </script>
        

2 line header : Header가 두 단 이상일 때

• Header 상,하 라인포함 75px

          
    <div id="grid3" class="grid"></div>
    <script>
      function CustomColumnHeader(props){
        const columnInfo = props.columnInfo;
          const el = document.createElement('div');
          el.className = 'custom';
          el.textContent = columnInfo.header;
          this.el = el;
      }
      CustomColumnHeader.prototype.getElement = function() {
        return this.el;
      }
      CustomColumnHeader.prototype.render = function(props) {
        this.el.textContent = props.columnInfo.header;
      }
      const grid3 = new Grid({
        el: document.getElementById('grid3'),
        data: [
        ],
        scrollX: false,
        scrollY: false,
        header : {
          height: 75,
          complexColumns: [
            {
              header: 'Header',
              name: 'mergeColumn1',
              childNames: ['salary', 'name','position1'],
              renderer: CustomColumnHeader
            }
          ],
          columns: [
            {
              name: 'id',
              renderer: CustomColumnHeader
            }
          ]
        },
        minRowHeight : 44,
        rowHeaders: [
          {
            type: 'checkbox',
            header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
            width: 44,
            renderer: {
              type: CheckboxRenderer
            },
          },
          {
            header: 'NO',
            type: 'rowNum',
            width: 49,
          },
        ],
        columns: [
          {
            header: '상태',
            name: 'state',
            width: 53,
            align : 'center',
            renderer : {
              type : StateRenderer
            }
          },
          {
            header: '발령일자',
            name: 'date1',
            align : 'center',
          },
          {
            header: '부서명',
            name: 'department',
            align : 'left',
          },
          {
            header: '기본급',
            name: 'salary',
            align : 'right',
          },
          {
            header: '이름',
            name: 'name',
            align : 'center',
          },
          {
            header: '직책',
            name: 'position1',
            align : 'center',
          },
          {
            header: '직위',
            name: 'position2',
            align : 'center',
          },
          {
            header: '직급',
            name: 'position3',
            align : 'center',
          },
          {
            header: '입사일',
            name: 'date2',
            align : 'center',
          }
        ]
      });
    </script>
        

Reference

• Tui grid