demo1：default

const demo1 = {
  className: 'demo1',
  data: [],
  property: {}
}

demo2：Basic use

const option = {
  className: 'demo2',
  data: [
    ['1st column title', '2nd column title', '3rd column title'],
    ['row 1; column 1', 'row 1; column 2', 'row 1; column 3'],
    ['row 2; column 1', 'row 2; column 2', 'row 2; column 3'],
    ['row 3; column 1', 'row 3; column 2', 'row 3; column 3'],
    ['row 4; column 1', 'row 4; column 2', 'row 4; column 3'],
    ['row 5; column 1', 'row 5; column 2', 'row 5; column 3'],
    ['row 6; column 1', 'row 6; column 2', 'row 6; column 3'],
    ['row 7; column 1', 'row 7; column 2', 'row 7; column 3'],
    ['row 8; column 1', 'row 8; column 2', 'row 8; column 3'],
    ['row 9; column 1', 'row 9; column 2', 'row 9; column 3']
  ],
  property: {
    // The style of the outermost container
    style: {
      width: '100%',
      margin: '0 auto',
      height: 200,
      border: '1px solid #999999'
    },
    isScroll: false,
    border: {
      borderWidth: 0
    },
    header: {
      show: true,
      style: {
        borderBottom: '1px solid #999999'
      },
      cellStyle: {
        fontWeight: 'bolder',
        fontSize: 20,
        color: '#333333'
      }
    }
  }
}

demo3：Cell border and row background color

const option = {
  className: 'demo3',
  data: [
    ['row 1; column 1', 'row 1; column 2', 'row 1; column 3'],
    ['row 2; column 1', 'row 2; column 2', 'row 2; column 3'],
    ['row 3; column 1', 'row 3; column 2', 'row 3; column 3'],
    ['row 4; column 1', 'row 4; column 2', 'row 4; column 3'],
    ['row 5; column 1', 'row 5; column 2', 'row 5; column 3'],
    ['row 6; column 1', 'row 6; column 2', 'row 6; column 3'],
    ['row 7; column 1', 'row 7; column 2', 'row 7; column 3'],
    ['row 8; column 1', 'row 8; column 2', 'row 8; column 3']
  ],
  property: {
    // The style of the outermost container
    style: {
      width: '100%',
      margin: '0 auto',
      height: 300,
      border: '1px solid #999999'
    },
    speed: 50,
    isScroll: true,
    border: {
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: '#999999'
    },
    header: {
      show: false
    },
    body: {
      row: {
        visual: {
          show: true,
          interval: 1,
          style: {
            backgroundColor: '#E8F4FC'
          }
        },
        silent: {
          show: false,
          style: {
            backgroundColor: '#bcf0fc'
          }
        }
      }
    }
  }
}

demo4：Serial number and scrollable list

const option = {
  className: 'demo4',
  data: [
    ['1st column', '2nd column', '3rd column', '4rd column'],
    ['row 1; column 1', 'row 1; column 2', 'row 1; column 3', 'row 1; column 4'],
    ['row 2; column 1', 'row 2; column 2', 'row 2; column 3', 'row 2; column 4'],
    ['row 3; column 1', 'row 3; column 2', 'row 3; column 3', 'row 3; column 4'],
    ['row 4; column 1', 'row 4; column 2', 'row 4; column 3', 'row 4; column 4'],
    ['row 5; column 1', 'row 5; column 2', 'row 5; column 3', 'row 5; column 4'],
    ['row 6; column 1', 'row 6; column 2', 'row 6; column 3', 'row 6; column 4'],
    ['row 7; column 1', 'row 7; column 2', 'row 7; column 3', 'row 7; column 4'],
    ['row 8; column 1', 'row 8; column 2', 'row 8; column 3', 'row 8; column 4'],
    ['row 9; column 1', 'row 9; column 2', 'row 9; column 3', 'row 9; column 4']
  ],
  property: {
    // The style of the outermost container
    style: {
      width: '100%',
      margin: '0 auto',
      height: 300,
      border: '1px solid #999999'
    },
    speed: 40,
    isScroll: true,
    border: {
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: '#ededed'
    },
    header: {
      show: true,
      style: {
        backgroundColor: '#1693ff',
        height: 40,
        borderBottom: '1px solid #999999'
      },
      cellStyle: {
        color: '#ffffff',
        fontWeight: 'bolder',
        fontSize: 20
      }
    },
    body: {
      row: {
        serialNumber: {
          show: true,
          formatter: 'No.{index}',
          style: {
            backgroundColor: '#1693ff',
            color: '#ffffff',
            width: 80
          }
        },
        style: {
          height: 34
        },
        visual: {
          show: true,
          style: {
            backgroundColor: '#E8F4FC'
          }
        },
        silent: {
          style: {
            backgroundColor: '#bcf0fc'
          }
        }
      },
      cell: {
        style: {
          fontSize: 16,
          minWidth: 50,
          color: '#000000',
          textAlign: 'center',
          border: '',
          width: 'auto'
        }
      }
    }
  }
}

demo5：Object cell: Add another tag to the cell

const option = {
  className: 'demo5',
  data: [
    ['1st column', '2nd column', '3rd column', '4rd column'],
    [
      'row 1; column 1',
      'row 1; column 2',
      {
        type: 'link',
        text: 'I am a link',
        event: 'onClick',
        href: 'https://github.com/oceanxy/react-tabllist',
        className: 'test-link'
      },
      {
        type: 'button',
        uid: '',
        value: 'click me',
        className: 'test-btn',
        callback: () => {
          alert('hello react-tabllist')
        }
      }
    ],
    [
      'row 2; column 1', 'row 2; column 2',
      {
        type: 'link',
        text: 'I am a link',
        event: 'onClick',
        href: 'https://github.com/oceanxy/react-tabllist',
        className: 'test-link'
      },
      {
        type: 'button',
        uid: '',
        value: 'click me',
        className: 'test-btn',
        callback: () => {
          alert('hello react-tabllist')
        }
      }
    ],
    ['row 3; column 1', 'row 3; column 2', 'row 3; column 3', 'row 3; column 4'],
    [
      {
        type: 'link',
        text: 'I am a link',
        event: 'onClick',
        href: 'https://github.com/oceanxy/react-tabllist',
        className: 'test-link'
      },
      {
        type: 'button',
        uid: '',
        value: 'click me',
        className: 'test-btn',
        callback: () => {
          alert('hello react-tabllist')
        }
      }, 'row 4; column 3', 'row 4; column 4'
    ],
    [
      [
        {
          type: 'radio',
          uid: '',
          name: 'group1',
          text: 'radio group 1-1',
          className: 'test-radio'
        },
        {
          type: 'radio',
          uid: '',
          name: 'group1',
          text: 'radio group 2-1',
          className: 'test-radio'
        }
      ],
      'row 5; column 2',
      'row 5; column 3',
      'row 5; column 4'
    ],
    [
      [
        {
          type: 'radio',
          uid: '',
          name: 'group2',
          text: 'radio group 2-1',
          className: 'test-radio'
        },
        {
          type: 'radio',
          uid: '',
          name: 'group2',
          text: 'radio group 2-2',
          className: 'test-radio'
        }
      ],
      'row 6; column 2',
      'row 6; column 3',
      'row 6; column 4'
    ],
    [
      'row 7; column 1', 'row 7; column 2',
      {
        type: 'link',
        text: 'I am a link',
        event: 'onClick',
        href: 'https://github.com/oceanxy/react-tabllist',
        className: 'test-link'
      },
      {
        type: 'button',
        uid: '',
        value: 'click me',
        className: 'test-btn',
        callback: (data, cellObject, cellElement) => {
          if(!data) {
            data = 'data of button is undefined'
          }

          cellElement.target.value = 'you clicked me!!'
          cellElement.target.style.width = '150px'

          console.log(data)
          console.log(cellObject)
          console.log(cellElement)

          alert('hello react-tabllist, Please check the console')
        }
      }
    ],
    ['row 8; column 1', 'row 8; column 2', 'row 8; column 3', 'row 8; column 4'],
    ['row 9; column 1', 'row 9; column 2', 'row 9; column 3', 'row 9; column 4']
  ],
  property: {
    // The style of the outermost container
    style: {
      width: '100%',
      margin: '0 auto',
      height: 300,
      border: '1px solid #999999'
    },
    speed: 40,
    isScroll: true,
    border: {
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: '#ededed'
    },
    header: {
      show: true,
      style: {
        backgroundColor: '#1693ff',
        height: 40,
        borderBottom: '1px solid #999999'
      },
      cellStyle: {
        color: '#ffffff',
        fontWeight: 'bolder',
        fontSize: 20
      }
    },
    body: {
      row: {
        rowCheckbox: true,
        style: {
          height: 34
        },
        specialStyle: [
          { height: 60 },
          { height: 40 },
          { height: 80 },
          { height: 100 },
          { height: 50 },
          { height: 80 }
        ],
        visual: {
          show: true,
          style: {
            backgroundColor: '#E8F4FC'
          }
        },
        silent: {
          style: {
            backgroundColor: '#bcf0fc'
          }
        }
      },
      cell: {
        style: {
          fontSize: 16,
          minWidth: 50,
          color: '#000000',
          textAlign: 'center',
          border: '',
          width: [60, '50%', '25%', '10%']
        }
      }
    }
  }
}

demo6：object unit for select and scroll to the specified row

const option = {
  className: 'demo6',
  data: [
   [
    '1st column',
    '2nd column',
    '3rd column',
    {
     type: 'select',
     text: '4rd column',
     data: 123,
     className: '',
     option: [
      {
       id: '1',
       label: 'Scroll to the 2nd row',
       value: 0
      },
      {
       id: '2',
       label: 'Scroll to the 5rd row',
       value: 1
      },
      {
       id: '3',
       label: 'Scroll to the 7rd row',
       value: 2
      }
     ],
     event: 'onChange',
     callback: (restData, objectUnit, event) => {
      // step 1: Get the value of select
      const value = event.target.value
      // step 2: According to the value of select to match the value of the corresponding row in the data,
      //      and then get the index of the row
      const data = objectUnit.instanceObject.props.data
      for(let i = 0, k = data; i < k.length; i++) {
       if(_.isPlainObject(data[i]) && parseInt(data[i].value) === parseInt(value)) {
        // step 3: Call method scrolling list
        objectUnit.instanceObject.scrollTo(i - 1)
        break
       }
      }
     }
    }
   ],
   [
    <span>I am span</span>,
    <div onClick={() => alert('test JSX event')}>test JSX event</div>,
    <a href='http://www.xieyangogo.cn/react-tabllist/'>I am link</a>,
    <div>I am div</div>
   ],
   {
    type: 'row',
    data: 1,
    value: 0,
    event: 'onClick',
    callback: (restData, objectUnit, event) => {
     alert('test event of row')
     console.log(restData, objectUnit, event)
    },
    className: 'click-row',
    cells: [
     'row 1; column 1',
     {
      type: 'link',
      text: 'I am a first link',
      className: 'test-link',
      callback: () => {console.log('I am a first link')}
     },
     {
      type: 'link',
      text: 'I am a second link',
      href: 'https://github.com/oceanxy/react-tabllist',
      className: 'test-link'
     },
     {
      type: 'button',
      value: 'click me',
      className: 'test-btn',
      callback: () => {
       alert('hello react-tabllist')
      }
     }
    ]
   },
   [
    'row 2; column 1', 'row 2; column 2',
    {
     type: 'link',
     text: 'I am a link',
     href: 'https://github.com/oceanxy/react-tabllist',
     className: 'test-link'
    },
    {
     type: 'button',
     value: 'click me',
     className: 'test-btn',
     callback: () => {
      alert('hello react-tabllist')
     }
    }
   ],
   ['row 3; column 1', 'row 3; column 2', 'row 3; column 3', 'row 3; column 4'],
   {
    type: 'row',
    data: 1,
    value: 1,
    event: 'onClick',
    callback: (restData, objectUnit, event) => {
     alert('test event of row')
     console.log(restData, objectUnit, event)
    },
    className: 'click-row',
    cells: [
     {
      type: 'link',
      text: 'I am a link',
      href: 'https://github.com/oceanxy/react-tabllist',
      className: 'test-link'
     },
     {
      type: 'button',
      value: 'click me',
      className: 'test-btn',
      callback: () => {
       alert('hello react-tabllist')
      }
     }, 'row 4; column 3', 'row 4; column 4'
    ]
   },
   [
    [
     {
      type: 'radio',
      name: 'group1',
      text: 'radio group 1-1',
      className: 'test-radio'
     },
     {
      type: 'radio',
      name: 'group1',
      text: 'radio group 2-1',
      className: 'test-radio'
     }
    ],
    'row 5; column 2',
    'row 5; column 3',
    'row 5; column 4'
   ],
   {
    type: 'row',
    data: 1,
    value: 2,
    event: 'onClick',
    callback: (restData, objectUnit, event) => {
     alert('test event of row')
     console.log(restData, objectUnit, event)
    },
    className: 'click-row',
    cells: [
     [
      {
       type: 'radio',
       name: 'group2',
       text: 'radio group 2-1',
       className: 'test-radio'
      },
      {
       type: 'radio',
       name: 'group2',
       text: 'radio group 2-2',
       className: 'test-radio'
      }
     ],
     'row 6; column 2',
     'row 6; column 3',
     'row 6; column 4'
    ]
   },
   [
    [
     {
      type: 'checkbox',
      name: 'chkxxx',
      text: 'chk1'
     },
     {
      type: 'checkbox',
      name: 'chkxxx',
      text: 'chk2'
     },
     {
      type: 'checkbox',
      name: 'chkxxx',
      text: 'chk3'
     }
    ],
    {
     type: 'link',
     text: 'I am a link',
     event: 'onClick',
     className: 'test-link',
     callback: () => {
      alert('clicked link')
     }
    },
    {
     type: 'button',
     value: 'click me',
     className: 'test-btn',
     callback: (data, cellObject, cellElement) => {
      if(!data) {
       data = 'data of button is undefined'
      }

      cellElement.target.value = 'you clicked me!!'
      cellElement.target.style.width = '150px'

      console.log(data)
      console.log(cellObject)
      console.log(cellElement)

      alert('hello react-tabllist, Please check the console')
     }
    }
   ],
   ['row 8; column 1', 'row 8; column 2', 'row 8; column 3', 'row 8; column 4'],
   ['row 9; column 1', 'row 9; column 2', 'row 9; column 3', 'row 9; column 4']
  ],
  property: {
   // The style of the outermost container
   style: {
    width: '100%',
    margin: '0 auto',
    height: 550,
    border: '1px solid #999999'
   },
   border: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#ededed'
   },
   header: {
    show: true,
    style: {
     backgroundColor: '#1693ff',
     height: 40,
     borderBottom: '1px solid #999999'
    },
    cellStyle: {
     color: '#ffffff',
     fontWeight: 'bolder',
     fontSize: 20
    }
   },
   body: {
    row: {
     rowCheckBox: true,
     onClick: () => {},
     style: {
      height: 34
     },
     serialNumber: {
      show: true,
      formatter: 'No.{index}',
      style: {
       backgroundColor: '#3991ff',
       width: 80,
       fontSize: 20,
       color: '#2cff41'
      },
      specialStyle: [
       {
        backgroundColor: '#203d7b'
       },
       {
        backgroundColor: '#2f4c99'
       },
       {
        backgroundColor: '#3960c0'
       }
      ]
     },
     specialStyle: [
      { height: 60 },
      { height: 40 },
      { height: 80 },
      { height: 100 },
      { height: 50 },
      { height: 80 }
     ],
     visual: {
      show: true,
      style: {
       backgroundColor: '#e8f4fc'
      }
     },
     silent: {
      style: {
       backgroundColor: '#bcf0fc'
      }
     }
    },
    cell: {
     style: {
      fontSize: 16,
      minWidth: 50,
      color: '#000000',
      textAlign: 'center',
      border: '',
      width: [60, 60, '30%', '25%', '10%']
     }
    }
   },
   scroll: {
    enable: true,
    speed: 50,
    distance: -1
   }
  }
 }

Use in actual projects

Case 1

const option = {
  className: 'case1',
  data: _.range(7).map((i) => {
    return [
      {
        type: 'link',
        uid: '',
        text: `test title ${i + 1}`,
        event: 'onClick',
        className: 'link',
        data: {
          datetime: '2019-01-17 17:58',
          author: 'Oceanxy'
        },
        callback: (data) => {
          alert(` author: ${data.author},\n datetime: ${data.datetime}`)
        }
      },
      {
        type: 'button',
        uid: '',
        value: `test button ${i + 1}`,
        className: 'btn',
        data: {
          message: `you clicked button ${i + 1} !`
        },
        callback: (data) => {
          alert(`${data.message}`)
        }
      }
    ]
  }),
  property: {
    style: {
      padding: 10,
      border: 'none',
      background: '#060719',
      width: 450,
      height: 410,
      margin: 0
    },
    border: {
      borderWidth: 0
    },
    header: {
      show: false
    },
    body: {
      row: {
        style: {
          height: 40,
          background: `url(${rowBg}) no-repeat center / 100% 100%`
        },
        spacing: 10
      },
      cell: {
        style: {
          textDecoration: 'none',
          color: '#ffffff',
          width: ',38%'
        }
      },
      cellOfColumn: {
        style: [{ textIndent: '2em', textAlign: 'left' }, { textAlign: 'center' }]
      }
    }
  }
}

Case 2

const option7 = {
  className: 'case2',
  data: (() => {
    const arr = _.range(7).map((i) => {
      return ['企业名称' + i, '积分' + i, '车牌' + i]
    })

    arr.unshift(['企业名称', '积分', '车牌'])

    return arr
  })(),
  property: {
    style: {
      padding: 10,
      border: 'none',
      background: '#060719',
      width: 558,
      height: 350,
      margin: 0
    },
    border: {
      borderWidth: 0
    },
    header: {
      show: true,
      style: {
        height: 50,
        background: `url(${demo7_header_bg}) no-repeat center / 100% 100%`
      },
      cellStyle: {
        color: '#ffffff'
      }
    },
    body: {
      row: {
        style: {
          height: 44,
          background: `url(${demo7_row_bg}) no-repeat center / 100% 100%`
        },
        spacing: 10
      },
      cell: {
        style: {
          color: '#ffffff',
          width: '35%,35%',
          textAlign: 'center'
        }
      }
    }
  }
}

Case 3

const option8 = {
  className: 'case3',
  data: (() => {
    const arr = _.range(7).map((i) => {
      return [Math.random() * 1000, '种类' + i, '车牌' + i, '归属地' + i, '行驶地' + i, '预警时间' + i]
    })

    arr.unshift(['序号', '种类', '车牌号', '归属地', '行驶地', '预警时间'])

    return arr
  })(),
  property: {
    style: {
      padding: 10,
      border: 'none',
      background: '#060719',
      width: 1180,
      height: 350,
      margin: 0
    },
    border: {
      borderWidth: 0
    },
    header: {
      show: true,
      style: {
        height: 50,
        background: `url(${demo8_header_bg}) no-repeat center / 100% 100%`
      },
      cellStyle: {
        color: '#ffffff'
      }
    },
    body: {
      row: {
        style: {
          height: 44,
          background: `url(${demo8_row_bg}) no-repeat center / 100% 100%`
        },
        spacing: 10
      },
      cell: {
        style: {
          color: '#ffffff',
          width: '16.6%, 16.6%, 16.6%, 16.6%, 16.6%',
          textAlign: 'center'
        }
      }
    }
  }
}

Case 4

function listDataset() {
  let data = [
    {
      name: '方娜',
      tel: '18484784543',
      avatar: '',
      group: '第一组',
      groupId: 1,
      operator: [
        { id: 3985, name: '谢超' },
        { id: 3881, name: '雷强' },
        { id: 1041, name: '崔刚' },
        { id: 3827, name: '邱芳' },
        { id: 7939, name: '朱平' }
      ]
    },
    {
      name: '唐平',
      tel: '13275647322',
      avatar: '',
      group: '第二组',
      groupId: 2,
      operator: [
        { id: 3014, name: '顾静' },
        { id: 5308, name: '方平' },
        { id: 1782, name: '孟杰' },
        { id: 2748, name: '顾静' },
        { id: 9714, name: '石敏' }
      ]
    },
    {
      name: '万静',
      tel: '19847859400',
      avatar: '',
      group: '第三组',
      groupId: 3,
      operator: [
        { id: 8773, name: '梁平' },
        { id: 1138, name: '姜桂英' },
        { id: 6874, name: '许强' },
        { id: 9581, name: '梁霞' },
        { id: 7084, name: '黎丽' }
      ]
    },
    {
      name: '林超',
      tel: '15638574857',
      avatar: '',
      group: '第四组',
      groupId: 4,
      operator: [
        { id: 7123, name: '薛洋' },
        { id: 7536, name: '赵军' },
        { id: 7049, name: '石艳' },
        { id: 3993, name: '孟刚' },
        { id: 5374, name: '魏洋' }
      ]
    },
    {
      name: '贺平',
      tel: '13984657487',
      avatar: '',
      group: '第五组',
      groupId: 5,
      operator: [
        { id: 7491, name: '史静' },
        { id: 6634, name: '于娜' },
        { id: 6801, name: '江静' },
        { id: 4349, name: '郝勇' },
        { id: 7141, name: '马艳' }
      ]
    }
  ]

  const type = [
    { id: 1, name: '第一组' },
    { id: 2, name: '第二组' },
    { id: 3, name: '第三组' },
    { id: 4, name: '第四组' },
    { id: 5, name: '第五组' }
  ]

  data = data.map(d => {
    return {
      type: 'row',
      value: d.groupId,
      cells: [
        <div className='group_info'>
          <div className='avatar'>
            <img src={d.avatar} alt='' />
          </div>
          <div className='group_h'>
            <p>小组：{d.group}</p>
            <p>小组长：{d.name}</p>
            <p>联系电话：{d.tel}</p>
          </div>
        </div>,
        <div className='group_p'>
          <p>组员：</p>
          <p>
            {d.operator.reduce((str, pn) => ` ${str + pn.name} `, '')}
          </p>
        </div>
      ]
    }
  })

  data.unshift([
    '',
    {
      type: 'select',
      text: '切换小组：',
      className: 'group_select',
      option: (() => {
        return type.map((item) => {
          return {
            id: item.id,
            label: item.name,
            value: item.id
          }
        })
      })(),
      event: 'onChange',
      callback: (restData, objectUnit, event) => {
        // step 1: Get the value of select
        const { value } = event.target
        // step 2: According to the value of select to match the value of the corresponding row in the data,
        //      and then get the index of the row
        const propsData = objectUnit.instanceObject.props.data

        for(let i = 0, k = propsData; i < k.length; i++) {
          if(_.isPlainObject(propsData[i]) && parseInt(propsData[i].value) === parseInt(value)) {
            // step 3: Call method scrolling list
            objectUnit.instanceObject.scrollTo(i - 1)
            break
          }
        }
      }
    }
  ])

  return data
}

const case4 = {
    className: 'pt',
    data: listDataset(),
    property: {
      scroll: {
        enable: true,
        speed: 2000,
        distance: -1
      },
      style: {
        width: '100%',
        height: 234,
        padding: '10px 20px'
      },
      border: {
        borderWidth: 0
      },
      header: {
        show: true,
        style: {
          height: 54,
          background: `url(${demo10_listHeaderBg}) no-repeat center / 100% 100%`
        },
        cellStyle: {
          color: '#81b8e2',
          fontSize: '28px'
        }
      },
      body: {
        row: {
          spacing: 0,
          visual: {
            show: true,
            style: {
              backgroundColor: 'none'
            }
          },
          style: {
            height: 138
          }
        },
        cell: {
          style: {
            color: '#ffffff',
            width: [188, 400, 180, 180, 180],
            textAlign: 'left',
            padding: '10px 0',
            fontSize: '24px'
          }
        }
      }
    }
  }