react-semantic-ui-datatable

React datatable using semantic-ui library.

Usage no npm install needed!

<script type="module">
  import reactSemanticUiDatatable from 'https://cdn.skypack.dev/react-semantic-ui-datatable';
</script>

README

react-semantic-ui-datatable

React datatable using semantic-ui library.

alt text

Columns definition

Attribute Default value Description
headerName -- The name of the column in the tbale header
field -- The name of attribute/field in the datasource
sortable false The cell/column will be sortable
filter false The cell/column will be filterable
style -- You can write your custom design to each cell
filterOptions -- You can change the filter type to date to display a datepicker : 
filterOptions: {
      type: 'date'
    }
customRender false Defines weither the cell will display a text or a custom element
cellRender -- The element that will be displayed if customRender: true 
cellRender: (data) => {
      return (
          data.field
      )
    }

Datatable

Attribute Default value Description
serverSide false The data will be fetched from server
columns -- The columns of the datatable (array of objects)
datasource -- the data of the datatable (array of objects)
loading false Display loader while fetching data
centered false Centered columns/cells
striped true Display striped rows
paginated false Display pagination panel
sortable false Sortable datatable
limiRows ['10', '15','25'] Limit rows displayed with pagination
totalRows -- Total data count
onQueryChange (data) => {} listener methode for pagination, limit, sort and filters changes.

data param example: 

filterData: {
  createdAt: {
    date: true,
    from: "",
    to: ""
  },
  label: {
    value: ""
  }
  },
  pagination: {
    limit: 10,
    page: 1,
    total: 0,
    totalPages: 0,
  },
  sortData: {
    sortDir: 1,
    sortField: "label",
  }

Client side datasource example

import { Datatable } from 'react-semantic-ui-datatable';

function App() {
  const colDefs = [
      {
        headerName: 'Label',
        field: 'label',
        sortable: true,
        filter: true
      },
      {
        headerName: 'Created at',
        field: 'createdAt',
        customRender: true,
        sortable: true,
        filter: true,
        filterOptions: {
          type: 'date'
        },
        cellRender: (data) => {
          return (
            data.createdAt
          )
        }
      },
      {
        headerName: 'Actions',
        field: 'actions',
        className: 'actions-cell',
        customRender: true,
        style: {
          minWidth: "120px",
          textAlign: 'center'
        },
        cellRender: (data) => {
          return (
            <>
              <Button className="action-btn" onClick={() => console.log(data._id)} circular primary icon='edit' />
              <Button className="action-btn" onClick={() => console.log(data._id)} circular negative icon='trash' />
            </>
          )
        }
      }
    ]

    const datasource = [
      {
        "_id": "60b569bbe6ccce3ca086dc97",
        "label": "Lord watch",
        "createdAt": "2021-05-31",
      },
      {
        "_id": "60b57059e6ccce3ca086dc99",
        "label": "Shirt",
        "createdAt": "2021-05-31",
      },
      {
        "_id": "60b957829c55fb24e0e00ee8",
        "label": "Samsung Galaxy S9",
        "createdAt": "2021-06-03"
      }
    ]

    return (
      <Datatable sortable paginated columns={colDefs} datasource={datasource}/>
    );
}

Server side datasource example

import { Datatable } from 'react-semantic-ui-datatable';

function App() {
  const colDefs = [
      {
        headerName: 'Label',
        field: 'label',
        sortable: true,
        filter: true
      },
      {
        headerName: 'Created at',
        field: 'createdAt',
        customRender: true,
        sortable: true,
        filter: true,
        filterOptions: {
          type: 'date'
        },
        cellRender: (data) => {
          return (
            data.createdAt
          )
        }
      },
      {
        headerName: 'Actions',
        field: 'actions',
        className: 'actions-cell',
        customRender: true,
        style: {
          minWidth: "120px",
          textAlign: 'center'
        },
        cellRender: (data) => {
          return (
            <>
              <Button className="action-btn" onClick={() => console.log(data._id)} circular primary icon='edit' />
              <Button className="action-btn" onClick={() => console.log(data._id)} circular negative icon='trash' />
            </>
          )
        }
      }
    ]

    const getServerSideData = (data) => {
      //get data from server
      setDatasource(result)
    }


    return (
      <Datatable serverSide onQueryChange={getServerSideData}
        columns={colDefs} totalRows={totalRows} datasource={datasource}
        paginated sortable
      />
    );
}