text: let code = {};
  
  code.base = `
  <template>
      <Table :columns="columns1" :data="data1"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.stripe = `
  <template>
      <Table stripe :columns="columns1" :data="data1"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.border = `
  <template>
      <Table border :columns="columns1" :data="data1"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.class = `
  <style>
      .ivu-table .demo-table-info-row td{
          background-color: #2db7f5;
          color: #fff;
      }
      .ivu-table .demo-table-error-row td{
          background-color: #ff6600;
          color: #fff;
      }
      .ivu-table td.demo-table-info-column{
          background-color: #2db7f5;
          color: #fff;
      }
      .ivu-table .demo-table-info-cell-name {
          background-color: #2db7f5;
          color: #fff;
      }
      .ivu-table .demo-table-info-cell-age {
          background-color: #ff6600;
          color: #fff;
      }
      .ivu-table .demo-table-info-cell-address {
          background-color: #187;
          color: #fff;
      }
  </style>
  <template>
      <p>Custom row styles:</p>
      <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
      <p>Custom column styles:</p>
      <Table :columns="columns9" :data="data1"></Table>
      <p>Custom arbitrary cell styles:</p>
      <Table :columns="columns1" :data="data8"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  columns9: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age',
                          className: 'demo-table-info-column'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ],
                  data8: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park'
                      },
                      {
                          name: 'Jim Green',
                          age: 25,
                          address: 'London No. 1 Lake Park',
                          cellClassName: {
                              age: 'demo-table-info-cell-age',
                              address: 'demo-table-info-cell-address'
                          }
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          cellClassName: {
                              name: 'demo-table-info-cell-name'
                          }
                      }
                  ]
              }
          },
          methods: {
              rowClassName (row, index) {
                  if (index === 1) {
                      return 'demo-table-info-row';
                  } else if (index === 3) {
                      return 'demo-table-error-row';
                  }
                  return '';
              }
          }
      }
  </script>
  `;
  
  code.height = `
  <template>
      <Table height="200" :columns="columns1" :data="data2"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data2: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      },
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.fixed = `
  <template>
      <Table width="550" border :columns="columns2" :data="data3"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns2: [
                      {
                          title: 'Name',
                          key: 'name',
                          width: 100,
                          fixed: 'left'
                      },
                      {
                          title: 'Age',
                          key: 'age',
                          width: 100
                      },
                      {
                          title: 'Province',
                          key: 'province',
                          width: 100
                      },
                      {
                          title: 'City',
                          key: 'city',
                          width: 100
                      },
                      {
                          title: 'Address',
                          key: 'address',
                          width: 200
                      },
                      {
                          title: 'Postcode',
                          key: 'zip',
                          width: 100
                      },
                      {
                          title: 'Action',
                          key: 'action',
                          fixed: 'right',
                          width: 120,
                          render: (h, params) => {
                              return h('div', [
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'View'),
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'Edit')
                              ]);
                          }
                      }
                  ],
                  data3: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          province: 'America',
                          city: 'New York',
                          zip: 100000
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'Washington, D.C. No. 1 Lake Park',
                          province: 'America',
                          city: 'Washington, D.C.',
                          zip: 100000
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          province: 'Australian',
                          city: 'Sydney',
                          zip: 100000
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          province: 'Canada',
                          city: 'Ottawa',
                          zip: 100000
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.fixedAll = `
  <template>
      <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns2: [
                      {
                          title: 'Name',
                          key: 'name',
                          width: 100,
                          fixed: 'left'
                      },
                      {
                          title: 'Age',
                          key: 'age',
                          width: 100
                      },
                      {
                          title: 'Province',
                          key: 'province',
                          width: 100
                      },
                      {
                          title: 'City',
                          key: 'city',
                          width: 100
                      },
                      {
                          title: 'Address',
                          key: 'address',
                          width: 200
                      },
                      {
                          title: 'Postcode',
                          key: 'zip',
                          width: 100
                      },
                      {
                          title: 'Action',
                          key: 'action',
                          fixed: 'right',
                          width: 120,
                          render: (h, params) => {
                              return h('div', [
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'View'),
                                  h('Button', {
                                      props: {
                                          type: 'text',
                                          size: 'small'
                                      }
                                  }, 'Edit')
                              ]);
                          }
                      }
                  ],
                  data4: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          province: 'America',
                          city: 'New York',
                          zip: 100000
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'Washington, D.C. No. 1 Lake Park',
                          province: 'America',
                          city: 'Washington, D.C.',
                          zip: 100000
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          province: 'Australian',
                          city: 'Sydney',
                          zip: 100000
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          province: 'Canada',
                          city: 'Ottawa',
                          zip: 100000
                      },
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          province: 'America',
                          city: 'New York',
                          zip: 100000
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'Washington, D.C. No. 1 Lake Park',
                          province: 'America',
                          city: 'Washington, D.C.',
                          zip: 100000
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          province: 'Australian',
                          city: 'Sydney',
                          zip: 100000
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          province: 'Canada',
                          city: 'Ottawa',
                          zip: 100000
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.highlight = `
  <template>
      <div>
          <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
          <Button @click="handleClearCurrentRow">Clear</Button>
      </div>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns3: [
                      {
                          type: 'index',
                          width: 60,
                          align: 'center'
                      },
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          },
          methods: {
              handleClearCurrentRow () {
                  this.$refs.currentRowTable.clearCurrentRow();
              }
          }
      }
  </script>
  `;
  
  code.selection = `
  <template>
      <div>
          <Table border ref="selection" :columns="columns4" :data="data1"></Table>
          <Button @click="handleSelectAll(true)">Set all selected</Button>
          <Button @click="handleSelectAll(false)">Cancel all selected</Button>
      </div>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns4: [
                      {
                          type: 'selection',
                          width: 60,
                          align: 'center'
                      },
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          },
          methods: {
              handleSelectAll (status) {
                  this.$refs.selection.selectAll(status);
              }
          }
      }
  </script>
  `;
  
  code.sort = `
  <template>
      <Table border :columns="columns5" :data="data5"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns5: [
                      {
                          title: 'Date',
                          key: 'date',
                          sortable: true
                      },
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age',
                          sortable: true
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data5: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.filter = `
  <template>
      <Table border :columns="columns6" :data="data5"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns6: [
                      {
                          title: 'Date',
                          key: 'date'
                      },
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age',
                          filters: [
                              {
                                  label: 'Greater than 25',
                                  value: 1
                              },
                              {
                                  label: 'Less than 25',
                                  value: 2
                              }
                          ],
                          filterMultiple: false,
                          filterMethod (value, row) {
                              if (value === 1) {
                                  return row.age > 25;
                              } else if (value === 2) {
                                  return row.age < 25;
                              }
                          }
                      },
                      {
                          title: 'Address',
                          key: 'address',
                          filters: [
                              {
                                  label: 'New York',
                                  value: 'New York'
                              },
                              {
                                  label: 'London',
                                  value: 'London'
                              },
                              {
                                  label: 'Sydney',
                                  value: 'Sydney'
                              }
                          ],
                          filterMethod (value, row) {
                              return row.address.indexOf(value) > -1;
                          }
                      }
                  ],
                  data5: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ],
              }
          }
      }
  </script>
  `;
  
  code.render = `
  <template>
      <Table border :columns="columns7" :data="data6"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns7: [
                      {
                          title: 'Name',
                          key: 'name',
                          render: (h, params) => {
                              return h('div', [
                                  h('Icon', {
                                      props: {
                                          type: 'person'
                                      }
                                  }),
                                  h('strong', params.row.name)
                              ]);
                          }
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      },
                      {
                          title: 'Action',
                          key: 'action',
                          width: 150,
                          align: 'center',
                          render: (h, params) => {
                              return h('div', [
                                  h('Button', {
                                      props: {
                                          type: 'primary',
                                          size: 'small'
                                      },
                                      style: {
                                          marginRight: '5px'
                                      },
                                      on: {
                                          click: () => {
                                              this.show(params.index)
                                          }
                                      }
                                  }, 'View'),
                                  h('Button', {
                                      props: {
                                          type: 'error',
                                          size: 'small'
                                      },
                                      on: {
                                          click: () => {
                                              this.remove(params.index)
                                          }
                                      }
                                  }, 'Delete')
                              ]);
                          }
                      }
                  ],
                  data6: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park'
                      }
                  ]
              }
          },
          methods: {
              show (index) {
                  this.$Modal.info({
                      title: 'User Info',
                      content: \`Name：$\{this.data6[index].name\}<br>Age：$\{this.data6[index].age\}<br>Address：$\{this.data6[index].address\}\`
                  })
              },
              remove (index) {
                  this.data6.splice(index, 1);
              }
          }
      }
  </script>
  `;
  
  code.expand = `
  \/\/ table-expand.vue
  <style scoped>
      .expand-row{
          margin-bottom: 16px;
      }
  </style>
  <template>
      <div>
          <Row class="expand-row">
              <Col span="8">
                  <span class="expand-key">Job: </span>
                  <span class="expand-value">{{ row.job }}</span>
              </Col>
              <Col span="8">
                  <span class="expand-key">Interest: </span>
                  <span class="expand-value">{{ row.interest }}</span>
              </Col>
              <Col span="8">
                  <span class="expand-key">Birthday: </span>
                  <span class="expand-value">{{ row.birthday }}</span>
              </Col>
          </Row>
          <Row>
              <Col span="8">
                  <span class="expand-key">Favorite book: </span>
                  <span class="expand-value">《{{ row.book }}》</span>
              </Col>
              <Col span="8">
                  <span class="expand-key">Favorite movie: </span>
                  <span class="expand-value">{{ row.movie }}</span>
              </Col>
              <Col span="8">
                  <span class="expand-key">Favorite music: </span>
                  <span class="expand-value">{{ row.music }}</span>
              </Col>
          </Row>
      </div>
  </template>
  <script>
      export default {
          props: {
              row: Object
          }
      };
  </script>
  
  \/\/ table.vue
  <template>
      <Table :columns="columns10" :data="data9"></Table>
  </template>
  <script>
      import expandRow from './table-expand.vue';
      export default {
          components: { expandRow },
          data () {
              return {
                  columns10: [
                      {
                          type: 'expand',
                          width: 50,
                          render: (h, params) => {
                              return h(expandRow, {
                                  props: {
                                      row: params.row
                                  }
                              })
                          }
                      },
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data9: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          job: 'Data engineer',
                          interest: 'badminton',
                          birthday: '1991-05-14',
                          book: 'Steve Jobs',
                          movie: 'The Prestige',
                          music: 'I Cry'
                      },
                      {
                          name: 'Jim Green',
                          age: 25,
                          address: 'London No. 1 Lake Park',
                          job: 'Data Scientist',
                          interest: 'volleyball',
                          birthday: '1989-03-18',
                          book: 'My Struggle',
                          movie: 'Roman Holiday',
                          music: 'My Heart Will Go On'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          job: 'Data Product Manager',
                          interest: 'tennis',
                          birthday: '1992-01-31',
                          book: 'Win',
                          movie: 'Jobs',
                          music: 'Don’t Cry'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          job: 'Data Analyst',
                          interest: 'snooker',
                          birthday: '1988-7-25',
                          book: 'A Dream in Red Mansions',
                          movie: 'A Chinese Ghost Story',
                          music: 'actor'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.loading = `
  <template>
      <div>
          <Table :loading="loading" :columns="columns1" :data="data1"></Table>
          <br>
          Change Loading Status <Switch v-model="loading"></Switch>
      </div>
  </template>
  <script>
      export default {
          data () {
              return {
                  loading: true,
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.size = `
  <template>
      <Table size="large" :columns="columns1" :data="data1"></Table>
      <Table size="small" :columns="columns1" :data="data1"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
                  data1: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ]
              }
          }
      }
  </script>
  `;
  
  code.table1 = `
  <template>
      <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
      <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="100" :current="1" @on-change="changePage"></Page>
          </div>
      </div>
  </template>
  <script>
      export default {
          data () {
              return {
                  tableData1: this.mockTableData1(),
                  tableColumns1: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Status',
                          key: 'status',
                          render: (h, params) => {
                              const row = params.row;
                              const color = row.status === 1 ? 'primary' : row.status === 2 ? 'success' : 'error';
                              const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
  
                              return h('Tag', {
                                  props: {
                                      type: 'dot',
                                      color: color
                                  }
                              }, text);
                          }
                      },
                      {
                          title: 'Portrayal',
                          key: 'portrayal',
                          render: (h, params) => {
                              return h('Poptip', {
                                  props: {
                                      trigger: 'hover',
                                      title: params.row.portrayal.length + 'portrayals',
                                      placement: 'bottom'
                                  }
                              }, [
                                  h('Tag', params.row.portrayal.length),
                                  h('div', {
                                      slot: 'content'
                                  }, [
                                      h('ul', this.tableData1[params.index].portrayal.map(item => {
                                          return h('li', {
                                              style: {
                                                  textAlign: 'center',
                                                  padding: '4px'
                                              }
                                          }, item)
                                      }))
                                  ])
                              ]);
                          }
                      },
                      {
                          title: 'People',
                          key: 'people',
                          render: (h, params) => {
                              return h('Poptip', {
                                  props: {
                                      trigger: 'hover',
                                      title: params.row.people.length + 'customers',
                                      placement: 'bottom'
                                  }
                              }, [
                                  h('Tag', params.row.people.length),
                                  h('div', {
                                      slot: 'content'
                                  }, [
                                      h('ul', this.tableData1[params.index].people.map(item => {
                                          return h('li', {
                                              style: {
                                                  textAlign: 'center',
                                                  padding: '4px'
                                              }
                                          }, item.n + '：' + item.c + 'People')
                                      }))
                                  ])
                              ]);
                          }
                      },
                      {
                          title: 'Sampling Time',
                          key: 'time',
                          render: (h, params) => {
                              return h('div', 'Almost' + params.row.time + 'days');
                          }
                      },
                      {
                          title: 'Updated Time',
                          key: 'update',
                          render: (h, params) => {
                              return h('div', this.formatDate(this.tableData1[params.index].update));
                          }
                      }
                  ]
              }
          },
          methods: {
              mockTableData1 () {
                  let data = [];
                  for (let i = 0; i < 10; i++) {
                      data.push({
                          name: 'Business' + Math.floor(Math.random () * 100 + 1),
                          status: Math.floor(Math.random () * 3 + 1),
                          portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
                          people: [
                              {
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
                              },
                              {
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
                              },
                              {
                                  n: 'People' + Math.floor(Math.random () * 100 + 1),
                                  c: Math.floor(Math.random () * 1000000 + 100000)
                              }
                          ],
                          time: Math.floor(Math.random () * 7 + 1),
                          update: new Date()
                      })
                  }
                  return data;
              },
              formatDate (date) {
                  const y = date.getFullYear();
                  let m = date.getMonth() + 1;
                  m = m < 10 ? '0' + m : m;
                  let d = date.getDate();
                  d = d < 10 ? ('0' + d) : d;
                  return y + '-' + m + '-' + d;
              },
              changePage () {
                  // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
                  this.tableData1 = this.mockTableData1();
              }
          }
      }
  </script>
  `;
  
  code.table2 = `
  <template>
      <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
          <Checkbox label="show">Show</Checkbox>
          <Checkbox label="weak">Weak</Checkbox>
          <Checkbox label="signin">Signin</Checkbox>
          <Checkbox label="click">Click</Checkbox>
          <Checkbox label="active">Active</Checkbox>
          <Checkbox label="day7">7, retained</Checkbox>
          <Checkbox label="day30">30, retained</Checkbox>
          <Checkbox label="tomorrow">The next day left</Checkbox>
          <Checkbox label="day">Day Active</Checkbox>
          <Checkbox label="week">Week Active</Checkbox>
          <Checkbox label="month">Month Active</Checkbox>
      </Checkbox-group>
      <Table :data="tableData2" :columns="tableColumns2" border></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  tableData2: this.mockTableData2(),
                  tableColumns2: [],
                  tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
              }
          },
          methods: {
              mockTableData2 () {
                  let data = [];
                  function getNum() {
                      return Math.floor(Math.random () * 10000 + 1);
                  }
                  for (let i = 0; i < 10; i++) {
                      data.push({
                          name: 'Name ' + (i+1),
                          fav: 0,
                          show: getNum(),
                          weak: getNum(),
                          signin: getNum(),
                          click: getNum(),
                          active: getNum(),
                          day7: getNum(),
                          day30: getNum(),
                          tomorrow: getNum(),
                          day: getNum(),
                          week: getNum(),
                          month: getNum()
                      })
                  }
                  return data;
              },
              getTable2Columns () {
                  const table2ColumnList = {
                      name: {
                          title: 'Name',
                          key: 'name',
                          fixed: 'left',
                          width: 200,
                          render: (h, params) => {
                              const fav = this.tableData2[params.index].fav;
                              const style = fav === 0 ? {
                                  cursor: 'pointer'
                              } : {
                                  cursor: 'pointer',
                                  color: '#f50'
                              };
  
                              return h('div', [
                                  h('Icon', {
                                      style: style,
                                      props: {
                                          type: fav === 0 ? 'ios-star-outline' : 'ios-star'
                                      },
                                      nativeOn: {
                                          click: () => {
                                              this.toggleFav(params.index);
                                          }
                                      }
                                  }),
                                  h('span', ' ' + params.row.name)
                              ]);
                          }
                      },
                      show: {
                          title: 'Show',
                          key: 'show',
                          width: 150,
                          sortable: true
                      },
                      weak: {
                          title: 'Weak',
                          key: 'weak',
                          width: 150,
                          sortable: true
                      },
                      signin: {
                          title: 'Signin',
                          key: 'signin',
                          width: 150,
                          sortable: true
                      },
                      click: {
                          title: 'Click',
                          key: 'click',
                          width: 150,
                          sortable: true
                      },
                      active: {
                          title: 'Active',
                          key: 'active',
                          width: 150,
                          sortable: true
                      },
                      day7: {
                          title: '7, retained',
                          key: 'day7',
                          width: 150,
                          sortable: true
                      },
                      day30: {
                          title: '30, retained',
                          key: 'day30',
                          width: 150,
                          sortable: true
                      },
                      tomorrow: {
                          title: 'The next day left',
                          key: 'tomorrow',
                          width: 150,
                          sortable: true
                      },
                      day: {
                          title: 'Day Active',
                          key: 'day',
                          width: 150,
                          sortable: true
                      },
                      week: {
                          title: 'Week Active',
                          key: 'week',
                          width: 150,
                          sortable: true
                      },
                      month: {
                          title: 'Month Active',
                          key: 'month',
                          width: 150,
                          sortable: true
                      }
                  };
  
                  let data = [table2ColumnList.name];
  
                  this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
  
                  return data;
              },
              changeTableColumns () {
                  this.tableColumns2 = this.getTable2Columns();
              },
              toggleFav (index) {
                  this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
              }
          },
          mounted () {
              this.changeTableColumns();
          }
      }
  </script>
  `;
  
  code.table3 = `
  <template>
      <div style="margin: 10px">
          Display border <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
          Display stripe <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
          Display index <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
          Display multi choice <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
          Display header <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
          Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
          <br>
          <br>
          Table size
          <Radio-group v-model="tableSize" type="button">
              <Radio label="large">large</Radio>
              <Radio label="default">medium(default)</Radio>
              <Radio label="small">small</Radio>
          </Radio-group>
      </div>
      <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  tableData3: [
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      },
                      {
                          name: 'John Brown',
                          age: 18,
                          address: 'New York No. 1 Lake Park',
                          date: '2016-10-03'
                      },
                      {
                          name: 'Jim Green',
                          age: 24,
                          address: 'London No. 1 Lake Park',
                          date: '2016-10-01'
                      },
                      {
                          name: 'Joe Black',
                          age: 30,
                          address: 'Sydney No. 1 Lake Park',
                          date: '2016-10-02'
                      },
                      {
                          name: 'Jon Snow',
                          age: 26,
                          address: 'Ottawa No. 2 Lake Park',
                          date: '2016-10-04'
                      }
                  ],
                  showBorder: false,
                  showStripe: false,
                  showHeader: true,
                  showIndex: true,
                  showCheckbox: false,
                  fixedHeader: false,
                  tableSize: 'default'
              }
          },
          computed: {
              tableColumns3 () {
                  let columns = [];
                  if (this.showCheckbox) {
                      columns.push({
                          type: 'selection',
                          width: 60,
                          align: 'center'
                      })
                  }
                  if (this.showIndex) {
                      columns.push({
                          type: 'index',
                          width: 60,
                          align: 'center'
                      })
                  }
                  columns.push({
                      title: 'Date',
                      key: 'date',
                      sortable: true
                  });
                  columns.push({
                      title: 'Name',
                      key: 'name'
                  });
                  columns.push({
                      title: 'Age',
                      key: 'age',
                      sortable: true,
                      filters: [
                          {
                              label: 'Greater than 25',
                              value: 1
                          },
                          {
                              label: 'Less than 25',
                              value: 2
                          }
                      ],
                      filterMultiple: false,
                      filterMethod (value, row) {
                          if (value === 1) {
                              return row.age > 25;
                          } else if (value === 2) {
                              return row.age < 25;
                          }
                      }
                  });
                  columns.push({
                      title: 'Address',
                      key: 'address',
                      filters: [
                          {
                              label: 'New York',
                              value: 'New York'
                          },
                          {
                              label: 'London',
                              value: 'London'
                          },
                          {
                              label: 'Sydney',
                              value: 'Sydney'
                          }
                      ],
                      filterMethod (value, row) {
                          return row.address.indexOf(value) > -1;
                      }
                  });
                  return columns;
              }
          }
      }
  </script>
  `;
  
  code.csv = `
  <template>
      <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
      <br>
      <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
      <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
      <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns8: [
                      {
                          "title": "Name",
                          "key": "name",
                          "fixed": "left",
                          "width": 200
                      },
                      {
                          "title": "Show",
                          "key": "show",
                          "width": 150,
                          "sortable": true,
                          filters: [
                              {
                                  label: 'Greater than 4000',
                                  value: 1
                              },
                              {
                                  label: 'Less than 4000',
                                  value: 2
                              }
                          ],
                          filterMultiple: false,
                          filterMethod (value, row) {
                              if (value === 1) {
                                  return row.show > 4000;
                              } else if (value === 2) {
                                  return row.show < 4000;
                              }
                          }
                      },
                      {
                          "title": "Weak",
                          "key": "weak",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Signin",
                          "key": "signin",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Click",
                          "key": "click",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Active",
                          "key": "active",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "7, retained",
                          "key": "day7",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "30, retained",
                          "key": "day30",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "The next day left",
                          "key": "tomorrow",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Day Active",
                          "key": "day",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Week Active",
                          "key": "week",
                          "width": 150,
                          "sortable": true
                      },
                      {
                          "title": "Month Active",
                          "key": "month",
                          "width": 150,
                          "sortable": true
                      }
                  ],
                  data7: [
                      {
                          "name": "Name1",
                          "fav": 0,
                          "show": 7302,
                          "weak": 5627,
                          "signin": 1563,
                          "click": 4254,
                          "active": 1438,
                          "day7": 274,
                          "day30": 285,
                          "tomorrow": 1727,
                          "day": 558,
                          "week": 4440,
                          "month": 5610
                      },
                      {
                          "name": "Name2",
                          "fav": 0,
                          "show": 4720,
                          "weak": 4086,
                          "signin": 3792,
                          "click": 8690,
                          "active": 8470,
                          "day7": 8172,
                          "day30": 5197,
                          "tomorrow": 1684,
                          "day": 2593,
                          "week": 2507,
                          "month": 1537
                      },
                      {
                          "name": "Name3",
                          "fav": 0,
                          "show": 7181,
                          "weak": 8007,
                          "signin": 8477,
                          "click": 1879,
                          "active": 16,
                          "day7": 2249,
                          "day30": 3450,
                          "tomorrow": 377,
                          "day": 1561,
                          "week": 3219,
                          "month": 1588
                      },
                      {
                          "name": "Name4",
                          "fav": 0,
                          "show": 9911,
                          "weak": 8976,
                          "signin": 8807,
                          "click": 8050,
                          "active": 7668,
                          "day7": 1547,
                          "day30": 2357,
                          "tomorrow": 7278,
                          "day": 5309,
                          "week": 1655,
                          "month": 9043
                      },
                      {
                          "name": "Name5",
                          "fav": 0,
                          "show": 934,
                          "weak": 1394,
                          "signin": 6463,
                          "click": 5278,
                          "active": 9256,
                          "day7": 209,
                          "day30": 3563,
                          "tomorrow": 8285,
                          "day": 1230,
                          "week": 4840,
                          "month": 9908
                      },
                      {
                          "name": "Name6",
                          "fav": 0,
                          "show": 6856,
                          "weak": 1608,
                          "signin": 457,
                          "click": 4949,
                          "active": 2909,
                          "day7": 4525,
                          "day30": 6171,
                          "tomorrow": 1920,
                          "day": 1966,
                          "week": 904,
                          "month": 6851
                      },
                      {
                          "name": "Name7",
                          "fav": 0,
                          "show": 5107,
                          "weak": 6407,
                          "signin": 4166,
                          "click": 7970,
                          "active": 1002,
                          "day7": 8701,
                          "day30": 9040,
                          "tomorrow": 7632,
                          "day": 4061,
                          "week": 4359,
                          "month": 3676
                      },
                      {
                          "name": "Name8",
                          "fav": 0,
                          "show": 862,
                          "weak": 6520,
                          "signin": 6696,
                          "click": 3209,
                          "active": 6801,
                          "day7": 6364,
                          "day30": 6850,
                          "tomorrow": 9408,
                          "day": 2481,
                          "week": 1479,
                          "month": 2346
                      },
                      {
                          "name": "Name9",
                          "fav": 0,
                          "show": 567,
                          "weak": 5859,
                          "signin": 128,
                          "click": 6593,
                          "active": 1971,
                          "day7": 7596,
                          "day30": 3546,
                          "tomorrow": 6641,
                          "day": 1611,
                          "week": 5534,
                          "month": 3190
                      },
                      {
                          "name": "Name10",
                          "fav": 0,
                          "show": 3651,
                          "weak": 1819,
                          "signin": 4595,
                          "click": 7499,
                          "active": 7405,
                          "day7": 8710,
                          "day30": 5518,
                          "tomorrow": 428,
                          "day": 9768,
                          "week": 2864,
                          "month": 5811
                      }
                  ]
              }
          },
          methods: {
              exportData (type) {
                  if (type === 1) {
                      this.$refs.table.exportCsv({
                          filename: 'The original data'
                      });
                  } else if (type === 2) {
                      this.$refs.table.exportCsv({
                          filename: 'Sorting and filtering data',
                          original: false
                      });
                  } else if (type === 3) {
                      this.$refs.table.exportCsv({
                          filename: 'Custom data',
                          columns: this.columns8.filter((col, index) => index < 4),
                          data: this.data7.filter((data, index) => index < 4)
                      });
                  }
              }      
          }
      }
  </script>
  `;
  
  code.head = `
  <template>
      <Table :columns="columns11" :data="data10" border height="500"></Table>
  </template>
  <script>
      export default {
          data () {
              return {
                  columns11: [
                      {
                          title: 'Name',
                          key: 'name',
                          align: 'center',
                          width: 200,
                          fixed: 'left',
                          filters: [
                              {
                                  label: 'Joe',
                                  value: 1
                              },
                              {
                                  label: 'John',
                                  value: 2
                              }
                          ],
                          filterMultiple: false,
                          filterMethod (value, row) {
                              if (value === 1) {
                                  return row.name === 'Joe';
                              } else if (value === 2) {
                                  return row.name === 'John Brown';
                              }
                          }
                      },
                      {
                          title: 'Other',
                          align: 'center',
                          children: [
                              {
                                  title: 'Age',
                                  key: 'age',
                                  align: 'center',
                                  width: 200,
                                  sortable: true
                              },
                              {
                                  title: 'Address',
                                  align: 'center',
                                  children: [
                                      {
                                          title: 'Street',
                                          key: 'street',
                                          align: 'center',
                                          width: 200
                                      },
                                      {
                                          title: 'Block',
                                          align: 'center',
                                          children: [
                                              {
                                                  title: 'Building',
                                                  key: 'building',
                                                  align: 'center',
                                                  width: 200,
                                                  sortable: true
                                              },
                                              {
                                                  title: 'Door No.',
                                                  key: 'door',
                                                  align: 'center',
                                                  width: 200
                                              }
                                          ]
                                      }
                                  ]
                              }
                          ]
                      },
                      {
                          title: 'Company',
                          align: 'center',
                          children: [
                              {
                                  title: 'Company Address',
                                  key: 'caddress',
                                  align: 'center',
                                  width: 200
                              },
                              {
                                  title: 'Company Name',
                                  key: 'cname',
                                  align: 'center',
                                  width: 200
                              }
                          ]
                      },
                      {
                          title: 'Gender',
                          key: 'gender',
                          align: 'center',
                          width: 200,
                          fixed: 'right'
                      }
                  ],
                  data10: []
              }
          },
          mounted () {
              const data = [];
              for (let i = 0; i < 20; i++) {
                  data.push({
                      key: i,
                      name: 'John Brown',
                      age: i + 1,
                      street: 'Lake Park',
                      building: 'C',
                      door: 2035,
                      caddress: 'Lake Street 42',
                      cname: 'SoftLake Co',
                      gender: 'M',
                  });
              }
              this.data10 = data;
          }
      }
  </script>
  `;
  
  export default code;