1.0.1 • Published 3 years ago

joy-react-table v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Joy React Datatable - Simple React based data table.

A simple and declarative datatable which offers much flexibility with as little configuration as possible.

This data table was created to:

  • provide a simple pluggable data table that required little configuration yet offered great flexibility.
  • gives more control and joy to the developer.

This datatable is only optimized for web views.

Features

  • Simple & declarative configuration
  • Column sorting
  • Pagination
  • Flexible styling

Requirements

  • React ^17.0.2

Installation

npm install joy-react-table --save

Props

config

PropertyTypeRequiredDefaultDescription
actionsObjectNoAction config.
fieldsArrayYes[]List of table head columns.
itemsArrayYes[]List of line items.
numOfRowsPerPageNumberYes10Number of line items to display per page.
primaryKeyStringYes'id'Unique property on each line item. It must be present in each line item.
styleObjectN0Custom object styling.

config.actions

PropertyTypeRequiredDefaultDescription
bulkArrayNo[]List of names of any actions that can be performed on multiple items.
singleArrayNo[]List of names of any actions that can be performed on individual line items.

config.fields

PropertyTypeRequiredDefaultDescription
keyStringYesUnique name of the field. It is used to internally identify the column and it must be present as a key on every line item.
titleStringYesTitle of the column for display purposes
isSortableBooleanNoSpecifies whether the table can sort the field.
formatterFunctionNoA custom formatting function applied the field for each line item.

config.style

Custom styling declaration.

PropertyTypeRequiredDefaultDescription
tableWrapperObjectNoStyling rule to be applied on the table wrapper element.
tableObjectNoStyling rule to be applied on the table element.
contextMenuTrayObjectNoStyling rule to be applied on the context menu tray element.
contextMenuItemObjectNoStyling rule to be applied on the context menu item element.
footerObjectNoStyling rule to be applied on the table footer element.

onDataRequest

A javascript function which should be called whenever the table requires more data. It must return an array of items to be added to the data table.

It should take the following arguments:

ArgumentTypeDefaultDescription
pageNumberNumber0Specifies the page number for proper pagination.

onMenuAction

A javascript function to be called whenever a menu action is performed on single or multiple items.

It should take the following arguments:

ArgumentTypeDefaultDescription
actionString''The name of the action that is fired.
payloadArray[]List of items to perform action on.
typeEnum (single, bulk)'single'Specifies whether it is a bulk or single item.

onItemClick

A javascript function which handles click event on individual line items.

It should accept the following arguments:

ArgumentTypeDefaultDescription
itemObject{}The data for the clicked line item.

Example

import RDTable from 'joy-react-table';

const App = () => {
    const sample_data = [
        {
            id: 1,
            name: "Rahmon Abdulkadir",
            email: "r.abdulkadir@gmail.com",
            date: Date.now(),
        },
        {
            id: 2,
            name: "Ambrose Alli",
            email: "ambralli@gmail.com",
            date: Date.now(),
        },
        {
            id: 3,
            name: "Ahmed Muktar",
            email: "m.ahmed@gmail.com",
            date: Date.now(),
        },
        {
            id: 4,
            name: "Ramin Djawadi",
            email: "ramin.d@gmail.com",
            date: Date.now(),
        },
        {
            id: 5,
            name: "Zainab Arabi",
            email: "zarabi@gmail.com",
            date: Date.now(),
        },
    ]
    const config = {
        actions: {
            bulk: ['Export', 'Delete'],
            single: ['View', 'Edit', 'Delete'],
        },
        fields: [
            {
                title: 'ID',
                key: 'id',
            },
            {
                title: 'Full Name',
                key: 'name',
                isSortable: true,
                isTitle: true,
            },
            {
                title: 'Email Address',
                key: 'email',
                isSortable: true,
                isTagline: true,
            },
            {
                title: 'Date created',
                key: 'date',
                formatter: value => (new Date(Number(value))).toDateString(),
                isMetadata: true,
            },
        ],
        items: sample_data,
        primaryKey: 'id',
        style: {},
    }

  const handleDataRequest = (pageNumber) => {
    console.log({ pageNumber });
  }

  const handleMenuAction = (action) => {
    console.log(action);

  }

  const handleItemClick = (item) => {
    console.log(item);
  }

  return <RDTable
    config={config}
    onDataRequest={handleDataRequest}
    onMenuAction={handleMenuAction}
    onItemClick={handleItemClick}
  />
}

export default App;

Issues and Contributions

Help is always welcome to the React Datatable project. If you think there's a feature missing or you found a bug, we'd appreciate it if you could spare some time and prepare a pull request. If you're only interested in making any contribution to this project, take a look at the open issues (especially "bugs").

You can learn more about contributing in the Contribution Docs.

License

MIT.