JSFiddle - React, Tailwind, and code Playground

by John Wick

JavaScript

import React from 'react'
import MTTable, { MTableBodyRow, MTableFilterRow, MTableCell, MTableBody } from 'material-table'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import AddBox from '@material-ui/icons/AddBox'
import ArrowUpward from '@material-ui/icons/ArrowUpward'
import Check from '@material-ui/icons/Check'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import ChevronRight from '@material-ui/icons/ChevronRight'
import Clear from '@material-ui/icons/Clear'
import DeleteOutline from '@material-ui/icons/DeleteOutline'
import Edit from '@material-ui/icons/Edit'
import FilterList from '@material-ui/icons/FilterList'
import FirstPage from '@material-ui/icons/FirstPage'
import LastPage from '@material-ui/icons/LastPage'
import Remove from '@material-ui/icons/Remove'
import SaveAlt from '@material-ui/icons/SaveAlt'
import Search from '@material-ui/icons/Search'
import ViewColumn from '@material-ui/icons/ViewColumn'




const tableIcons = {
  Add: AddBox,
  Check: Check,
  Clear: Clear,
  Delete: DeleteOutline,
  DetailPanel: ChevronRight,
  Edit: Edit,
  Export: SaveAlt,
  Filter: FilterList,
  FirstPage: FirstPage,
  LastPage: LastPage,
  NextPage: ChevronRight,
  PreviousPage: ChevronLeft,
  ResetSearch: Clear,
  Search: Search,
  SortArrow: ArrowUpward,
  ThirdStateCheck: Remove,
  ViewColumn: ViewColumn,
}

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  palette: {
    secondary: { main: GREEN },
  },
})

const Container = ({ style, ...props }) => (
  <Paper
    style={{
      ...style,
    }}
    {...props}
  />
)

const FilterRow = props => <MTableFilterRow {...props} selection={false} hasDetailPanel />

const Row = ({ onContextMenu = () => {}, ...props }) => (
  <MTableBodyRow
    {...props}
    onContextMenu={e => {
      onContextMenu(e, props.data)
    }}
  />
)

const Cell = props => (
  <MTableCell
    style={{
      borderLeft: `0.5px solid `,
    }}
    {...props}
 ...