Datagrid

기본 사용

• 데이터 테이블

<div class="new-grid"></div>

<div style="width: 100%; height: 100px; overflow-x: auto; margin-top: 20px;">
  <div class="new-grid2"></div>
</div>

<div style="width: 100%; overflow-x: auto; margin-top: 20px;">
  <div class="new-grid3"></div>
</div>

<div style="width: 100%; margin-top: 20px;">
  <div class="new-grid4"></div>
</div>

Gn.create('datagrid', {
  target: '.new-grid',
  headers: [
    {
      label: 'no',
      key: 'number',
      onSelect: function() {
        console.log(arguments)
      },
      template: function(k, d) {
        return '<span>' + d[k] + '</span>'
      },
      draggable: true,
      sortable: true,
      sort: 'asc'
    },
    {
      label: '제목',
      key: 'title',
      style: {
        width: '250px'
      },
      className: 'has-text-right',
      draggable: true,
      bodyClass: 'has-text-left',
      sortable: true
    },
    {
      label: '날짜',
      key: 'date',
      style: {
        width: '150px'
      },
      className: 'has-text-center',
      bodyClass: 'has-text-left'
    }
  ],
  data: [
    {
      number: '1',
      title: '하나',
      date: '2020-09-19',
      desc: 'hello, world',
      child: [
        {
          number: '1-1',
          title: '1-하나',
          date: '2020-09-19'
        },
        {
          number: '1-2',
          title: '1-둘',
          date: '2020-09-19',
          desc: 'hello, world',
          child: [
            {
              number: '1-2-1',
              title: '1-둘-1',
              date: '2020-09-19',
              desc: 'hello, world',
              child: [
                {
                  number: '1-2-1-1',
                  title: '1-둘-1-1',
                  desc: 'hello, world',
                  date: '2020-09-19'
                }
              ]
            }
          ]
        }
      ]
    },
    {
      number: '2',
      title: '둘',
      date: '2020-09-19',
      desc: 'hello, world'
    }
  ],
  onSort: function(column) {
    console.log('column', column)
  },
  onDragEnd: function(column, columns) {
    console.log(column, columns)
  },
  onToggle: function(type, row, n) {
    console.log(type, row, n)
        // 이렇게 하면 펼쳐질때마다 해당 로우에 2개의 자식을 바인딩한다.
        // type === 'expanded' && this.addChild(n, [{
        //   number: '000',
        //   title: '추가된 자식1',
        //   date: '2020-02-02'
        // },{
        //   number: '001',
        //   title: '추가된 자식2',
        //   date: '2020-02-02'
        // }]) 
  },
  onCheckAll: function(ggg) {
    console.log('ggg', ggg)
  },
  onDoubleClick: function(e) {
    console.log('dbclick', e)
  },
  hasCheck: true,
  hasDelete: true
})
Gn.create('datagrid', {
  target: '.new-grid2',
  headers: [
    {
      label: 'no',
      key: 'number',
      onSelect: function () {
        // eslint-disable-next-line prefer-rest-params
        console.log(arguments);
      },
      template: function (k, d) {
        return '<span>' + d[k] + '</span>';
      },
      draggable: true,
      sortable: true,
      sort: 'asc'
    },
    {
      label: '제목',
      key: 'title',
      style: {
        width: '250px'
      },
      className: 'has-text-right',
      draggable: true,
      bodyClass: 'has-text-left',
      sortable: true
    },
    {
      label: '날짜',
      key: 'date',
      style: {
        width: '150px'
      },
      className: 'has-text-center',
      bodyClass: 'has-text-left'
    }
  ],
  data: [
    {
      number: '1',
      title: '하나',
      date: '2020-09-19',
      desc: 'hello, world',
      child: [
        {
          number: '1-1',
          title: '1-하나',
          date: '2020-09-19'
        },
        {
          number: '1-2',
          title: '1-둘',
          date: '2020-09-19',
          desc: 'hello, world',
          child: [
            {
              number: '1-2-1',
              title: '1-둘-1',
              date: '2020-09-19',
              desc: 'hello, world',
              child: [
                {
                  number: '1-2-1-1',
                  title: '1-둘-1-1',
                  desc: 'hello, world',
                  date: '2020-09-19'
                }
              ]
            }
          ]
        }
      ],
      color: 'is-danger-light'
    },
    {
      number: '2',
      title: '둘',
      date: '2020-09-19',
      desc: 'hello, world'
    }
  ],
  hasHeader: false,
  hasCheck: true,
  hasDelete: true,
  textSets: {
    deleteConfirmMessage: '파일을 삭제하시겠습니까?'
  },
  // onDelete 에서 false 를 반환하면 해당 행 삭제를 취소할 수 있다.
  onDelete: (data, index) => {
    console.log(data, index);
    // 예) 특정 조건에 따라 삭제 취소
    // if (index === 0) {
    //   return false;
    // }
  }
})
Gn.create('datagrid', {
  target: '.new-grid3',
  headers: [
    {
      label: 'row data numbers',
      key: 'number',
      style: { width: '50px' },
      sortable: true,
      draggable: true,
      template: function (k, d) {
        return '<span>' + d[k] + '</span>';
      }
    },
    {
      label: '제목',
      key: 'title',
      sortable: true,
      draggable: true,
      template: function (k, d) {
        return '<span>' + d[k] + '</span>';
      }
    },
    {
      label: '날짜를 표시하는 컬럼입니다',
      key: 'date',
      style: {
        width: '100px'
      },
      tipField: 'desc'
    },
    {
      label: '헤더명도길어집니다',
      key: 'desc',
      style: { width: '50px' }
    }
  ],
  data: (callback, ui) => {
    return callback([
      {
        number: '1',
        title: '하나',
        date: '2020-09-19'
      },
      {
        number: '232342333',
        title: 'Lorem labore culpa voluptate proident ad et id nostrud excepteur incididunt ut officia et ullamco.',
        date: '2020-09-19',
        desc: 'Voluptate enim culpa anim dolor magna excepteur ullamco id aliquip consequat ullamco voluptate consectetur.',
        ordered: false,
        limited: 0,
        one: 'one',
        two: 2,
        three: {
          hello: 'p',
          ordered: false,
          limited: 0,
          one: 'one',
          two: 2,
          desc: 'hhhhhhh'
        },
        checked: true
      }
    ]);
  },
  sort: function(column) {
    console.log('column', column)
  },
  onSelect: function(row, index) {
    console.log('row', row, index);
    this.showDetail(index, null, ['number', 'title', 'date', 'desc', 'ordered', 'limited', 'one', 'two', 'three', 'checked']);
  },
  onDoubleClick: function(e) {
    console.log('dbclick', e)
  },
  isEllipsis: true,
  hasCheck: true,
  hasOrder: true,
  textSets: {
    orderLabel: '이동'
  },
  paginator: {
    rows: 30
  },
  onChange: updatedData => {
    console.log(updatedData)
  }
})
Gn.create('datagrid', {
  target: '.new-grid4',
  orientation: 'horizontal',
  orientationOptions: {
    columns: 'auto-fit',
    minWidth: '240px'
  },
  hasHeader: true,
  hasCheck: true,
  hasDelete: true,
  headers: [
    {
      label: '이름',
      key: 'name'
    },
    {
      label: '부서',
      key: 'team'
    },
    {
      label: '상태',
      key: 'status',
      template: function (k, d) {
        return '<span class="tag is-info">' + d[k] + '</span>';
      }
    }
  ],
  data: [
    {
      name: '홍길동',
      team: '플랫폼개발',
      status: 'ACTIVE'
    },
    {
      name: '김철수',
      team: '디자인시스템',
      status: 'PENDING'
    },
    {
      name: '이영희',
      team: 'QA',
      status: 'DONE'
    },
    {
      name: '박민수',
      team: '프론트엔드',
      status: 'ACTIVE'
    },
    {
      name: '최지우',
      team: '서비스기획',
      status: 'REVIEW'
    }
  ],
  textSets: {
    deleteConfirmMessage: '카드를 삭제하시겠습니까?'
  }
})

가로 모드 동작

• orientation: 'horizontal'은 최상위 row만 카드형으로 렌더링한다.
• childField 기반 하위 데이터는 가로 모드에서 렌더링하지 않는다.
• orientationOptions.columns: 'auto-fit'이고 gap이 0, '0', '0px', '' 또는 미지정이면 내부적으로 5px gap을 적용한다.
• 카드 경계 연결 규칙은 gap: 0일 때만 적용되며, gap > 0이면 각 카드가 독립 border를 가진다.

메소드