JSFiddle - React, Tailwind, and code Playground

by Sancor Framework

HTML

<link
  rel="stylesheet"
  href="https://cdn.datatables.net/2.3.8/css/dataTables.dataTables.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.datatables.net/responsive/3.0.8/css/responsive.dataTables.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.datatables.net/fixedheader/4.0.6/css/fixedHeader.dataTables.css"
/>

<table id="example" class="display nowrap">
</table>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.8/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.6/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.6/js/fixedHeader.dataTables.js"></script>

JavaScript

const dt = new DataTable('#example', {
  fixedHeader: true,
  paging: false,
  columns: [
    {
      className: 'dtr-control',
      visible: true,
      orderable: false,
      defaultContent: ""
    },
    {
      data: "test1",
      title: "tes",
    },
    {
      data: "test2",
      title: "test",
    },
    {
      data: "test3",
      title: "tes",
    },
    {
      data: "test4",
      title: "test 4",
    },
    {
      data: "test5",
      title: "test",
    },
    {
      data: "test6",
      title: "tes",
    },
    {
      data: "test7",
      title: "test 7",
    },
    {
      data: "test8",
      title: "tes",
    }
  ],
  data: Array(50).fill(0).map(_ => {
    return {
      test1: String(Math.random()).slice(0, 3),
      test2: String(Math.random()).slice(0, 4),
      test3: String(Math.random()).slice(0, 3),
      test4: Math.random(),
      test5: String(Math.random()).slice(0, 5),
      test6: String(Math.random()).slice(0, 3),
      test7: Math.random(),
      test8: String(Math.random()).slice(0, 3),
    }
  }),
  order: [1, 'asc'],
  responsive: {
    details: {
      type: 'column',
    },
  },
})