react-modal

• react-modal is a versatile and accessible modal dialog component for React, providing a straightforward way to create customizable modal popups in applications.

Table of Contents

• Installation
• Getting Started
• Prerequires
• Examples

Installation

To install, you can use npm or yarn:

$ npm install --save react-table-modal
$ yarn add react-table-modal

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

npm start

Prerequires

npm install

Examples

Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

import React from 'react'
import { DataTable } from 'react-table-modal'
import 'react-table-modal/dist/index.css'

const App = () => {
  return (
    <DataTable
      theme="blue"
      editButton={true}
      editField={["name", "family", "retired"]}
      deleteButton={true}
      cols={["name", "family", "retired"]}
      data={[
        { name: "ali", family: "rezaei", retired: 'Yes' },
        { name: "reza", family: "alinia", retired: 'No' },
        { name: "mehdi", family: "hoseini", retired: 'Yes' },
        { name: "amin", family: "amiri", retired: 'Yes' },
        { name: "mehran", family: "kazemi", retired: 'No' },
      ]}
    />
  )
}

export default App

Attributes

| Name | Type | Description | |--------------|--------|-------------------------------------------------------| | theme | string | This feature sets the table color theme. | | editButton | boolean| Enabling this feature adds an edit button to each row.| | editField | array | Specifies the editable fields. | | deleteButton | boolean| Ability to add a delete button to each row of the table.| | cols | array | Specifies the columns to be displayed in the table. | | rowsPerPage | object | The table displays the number of rows per page. | | data | array | A collection of data. |

DataTable

The DataTable component is used to display tabular data with specific features.

Features

• Theme Examples

Theme Examples

Below are examples of the available themes along with their respective class names and images:

Default Theme

<DataTable theme="default" ... />

Blue Theme

<DataTable theme="blue" ... />

Red Theme

<DataTable theme="red" ... />

Green Theme

<DataTable theme="green" ... />

Demos

There are several demos hosted on CodePen which demonstrate various features of react-table-modal:

• First Example
• Second Example
• Third Example

License

MIT © alireza-ramzanpour