Frappe DataTable

Simple demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
<script src="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.css">
<div id="datatable"></div>

CSS

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

JavaScript

var datatable = new DataTable('#datatable', {
columns: ['名前', '詳細', '単価'],
data: [
  ['りんご', '赤くて甘い', '100円'],
  ['バナナ', '黄色くて甘い', '88円'],
  ['スイカ', 'でかくて甘い', '1980円'],
  ['マンゴー', 'よくわからんが甘い', '500円'],
  ['ブドウ', '多分甘い', '680円'],
  ['もも', 'すごく甘い', '120円'],
  ['グレープフルーツ', 'ものによっては甘い', '100円'],
  ['レモン', '酸っぱい', '80円'],
]
})