mobigrid-module

A flexible and customizable data table interface module with advanced filtering, column management, and action handling capabilities.

Installation

npm install mobigrid-module

Usage

You can use the MobigridModule component by importing it into your React application.

import MobigridModule from 'mobigrid-module';
import 'mobigrid-module/dist/index.css'; // Import styles if necessary

function App() {
  const handleEdit = (row) => {
    console.log('Edit row:', row);
  };

  const handleDelete = (row) => {
    console.log('Delete row:', row);
  };

  const checkEditPermission = (row) => {
    return row.status !== 'LOCKED';
  };

  return (
    <MobigridModule
      configUrl="https://api.example.com/config"
      // OR provide configJson directly
      // configJson={myConfigObject}
      dataUrl="https://api.example.com/data"
      callbacks={{
        onEdit: handleEdit,
        onDelete: handleDelete,
        canEdit: checkEditPermission
      }}
      customHeaders={{
        'Authorization': 'Bearer token123'
      }}
    />
  );
}

Component Props

The MobigridModule accepts the following props:

| Prop | Type | Description | |------|------|-------------| | configUrl | string | URL to fetch the configuration JSON from. | | configJson | object | Direct configuration object. Use this or configUrl. | | dataUrl | string | URL to fetch the table data from. Overrides data_url in config. | | preJsUrl | string | URL to fetch a JavaScript file to execute before rendering (e.g., for global functions). | | preJs | string | Direct JavaScript code string to execute. | | callbacks | object | An object containing functions referenced by action buttons or conditions. | | customHeaders | object | Custom HTTP headers to include in API requests (data and config). | | itemsPerPage | number | Number of items to display per page (default: 14). | | dateFormat | string | Format string for dates in API requests (default: "MM-dd-yyyy HH:mm"). | | children | ReactNode | Child components to render at the bottom of the module. |

Configuration Structure

The configuration object defines the structure of the table, filters, and columns. You can provide this via the configUrl endpoint or directly via the configJson prop.

{
  "title": "User Management",
  "data_url": "https://api.example.com/users",
  "Filters": [
    [
      {
        "type": "Text",
        "name": "search",
        "label": "Search Users"
      },
      {
        "type": "Select",
        "name": "role",
        "label": "Role",
        "urlSource": "https://api.example.com/roles" // Dynamic options
      }
    ],
    [
      {
        "type": "Date",
        "name": "fromDate",
        "label": "From Date"
      },
       {
        "type": "Date",
        "name": "toDate",
        "label": "To Date"
      }
    ]
  ],
  "colomns": [ // Note: spelling is 'colomns' in current version
    {
      "title": "Name",
      "key": "fullName",
      "type": "text"
    },
    {
      "title": "Status",
      "key": "status",
      "type": "status"
    },
    {
      "title": "Created At",
      "key": "createdAt",
      "type": "date",
      "pattern": "dd/MM/yyyy"
    },
    {
      "title": "Actions",
      "key": "ACTIONS_BUTTONS",
      "actions": [
        {
          "label": "Edit",
          "icon": "icon-edit",
          "action": "onEdit",
          "condition": "canEdit"
        }
      ]
    }
  ]
}

Filters Configuration

Filters are defined as an array of arrays (rows of filters).

• type: The type of filter. Supported types:
  • "Text": Simple text input.
  • "Select": Dropdown menu. Use urlSource for dynamic options or options for static ones.
  • "Date": Date picker.
• name: The query parameter key that will be sent to the data_url.
• label: The label displayed for the filter.
• urlSource: (For Select type) URL to fetch options from. Expects an array of objects { label, value }.
• options: (For Select type) Static array of options { label, value }.

Columns Configuration (colomns)

Defines the table columns.

• title: Header text for the column.
• key: The key in the data object to display.
• type: formatting type.
  • "text": Default display.
  • "date": Formats date using pattern (default: dd-MM-yyyy).
  • "money": Formats as currency. Usage: currency prop required.
  • "status": Displays a colored badge based on status value (PENDING, PAID, CANCELLED, etc.).
  • "ACTIONS_BUTTONS": Special column for action buttons.
• scroll: If true, limits height and adds scrollbar for long content.

Actions Configuration

For columns with key: "ACTIONS_BUTTONS", you can define an actions array.

• label: Text on the button.
• icon: Icon name (referenced from Feather icons, prefixed with icon-).
• action: The name of the callback function in the callbacks prop to execute on click. receives the row data.
• condition: (Optional) The name of the callback function in the callbacks prop to determine visibility. Receives row data and must return boolean.

Development

To build the project:

npm run build

To deploy (build, version bump, publish, and push):

# Default bump is patch
./deploy.sh

# Specify bump type
./deploy.sh minor