使用表格高级编辑器轻松创建精美表格 - 代码示例

<p>使用表格高级编辑器轻松创建精美的表格</p>
<form method='POST'>
  <textarea name='table' id='table' cols='30' rows='10'></textarea>
  <button type='submit'>提交</button>
</form>
<script src='https://cdn.jsdelivr.net/npm/tui-grid/dist/tui-grid.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/tui-grid/dist/tui-grid.css'>
<script>
  const tableData = [
    { name: 'Alice', age: 24, gender: 'female' },
    { name: 'Bob', age: 32, gender: 'male' },
    { name: 'Charlie', age: 18, gender: 'male' },
    { name: 'Dave', age: 45, gender: 'male' },
    { name: 'Emma', age: 28, gender: 'female' }
  ];

  const columns = [
    { header: '姓名', name: 'name', width: '150px' },
    { header: '年龄', name: 'age', width: '100px' },
    { header: '性别', name: 'gender', width: '100px' }
  ];

  const options = {
    data: tableData,
    columns: columns,
    header: {
      height: 40
    },
    body: {
      rowHeight: 40
    }
  };

  const el = document.querySelector('#table');
  const grid = new tui.Grid(el, options);
  grid.setRow(0, { name: 'Alice', age: 25, gender: 'female' });
</script>