tabulator

by rough cheap

HTML

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.4.0/js/tabulator.min.js"></script>

  <div id="example-table"></div>

JavaScript

const exampleData = [
  {
    id: 21,
    name: 'Uma Vale',
    progress: 40,
    gender: 'male',
    rating: 1,
    height: 1,
    col: 'yellow',
    dob: '21/09/1980',
    car: true,
  },
  {
    id: 22,
    name: 'Vince Watts',
    progress: 47,
    gender: 'female',
    rating: 2,
    height: 2,
    col: 'maroon',
    dob: '22/10/1981',
    car: false,
  },
  {
    id: 23,
    name: 'Wendy Young',
    progress: 54,
    gender: 'female',
    rating: 3,
    height: 3,
    col: 'violet',
    dob: '23/11/1982',
    car: true,
  },
  {
    id: 24,
    name: 'Xander Zhang',
    progress: 61,
    gender: 'male',
    rating: 4,
    height: 4,
    col: 'indigo',
    dob: '24/12/1983',
    car: false,
  },
  {
    id: 25,
    name: 'Yara Ash',
    progress: 68,
    gender: 'male',
    rating: 5,
    height: 5,
    col: 'red',
    dob: '25/01/1984',
    car: true,
  },
  {
    id: 26,
    name: 'Zane Banks',
    progress: 75,
    gender: 'male',
    rating: 1,
    height: 1,
    col: 'blue',
    dob: '26/02/1985',
    car: false,
  },
  {
    id: 27,
    name: 'Amber Cole',
    progress: 82,
    gender: 'male',
    rating: 2,
    height: 2,
    col: 'green',
    dob: '27/03/1986',
    car: true,
  },
  {
    id: 28,
    name: 'Brett Dean',
    progress: 89,
    gender: 'male',
    rating: 3,
    height: 3,
    col: 'orange',
    dob: '28/04/1987',
    car: false,
  },
  {
    id: 29,
    name: 'Cora East',
    progress: 96,
    gender: 'female',
    rating: 4,
    height: 4,
    col: 'yellow',
    dob: '01/05/1988',
    car: true,
  },
  {
    id: 30,
    name: 'Drew Frost',
    progress: 3,
    gender: 'male',
    rating: 5,
    height: 5,
    col: 'maroon',
    dob: '02/06/1989',
    car: false,
  },
  {
    id: 31,
    name: 'Ella Gray',
    progress: 10,
    gender: 'female',
    rating: 1,
    height: 1,
    col: 'violet',
    dob: '03/07/1990',
 ...