react-semantic-ui-datatable

react-semantic-ui-datatable

React datatable using semantic-ui library.

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
      />
    );
}