react-dj-table outputs a semantically correct, CSS agnostic HTML table. CSS Separation, provides flexiblity to style the tables with any valid table styles.

_{standard CSS example, see the second example in basics.}

Utility type CSS frameworks, like Tailwind, add styles to HTML elements.

Tailwind example #

  const options = {
   tableCss: "table-fixed cursor-pointer w-full",
   cellCss: "break-words  border p-4 ",
   theadCss: "bg-blue-500 text-gray-200 px-8 py-4",
   selectable: true,
   selectedRowCss: "bg-blue-100"
  }

_{TODO add tailwind groups to child pager elements}

https://codesandbox.io/s/testing-forked-meysj

Sematic UI React responsive example #

  const options = {tableCss: "ui fixed red table"}

https://codesandbox.io/s/basicoptions-forked-ugb9g

BootStrap responsive example #

  const options = {tableCss: "table"}

https://codesandbox.io/s/bootstap-demp-o2562

see more... https://css-tricks.com/complete-guide-table-element/