react-async-table

LIVE DEMO: https://mjakal.github.io/react-async-table/

Creating yet another bootstrap based data table component, came out of necessity. While I was working on one of my React projects, I discovered that there are a lot of solutions out there, most of them required heavy customization or lacked basic features such as built in customizable expandable rows, asynchronous filtering and pagination, so I rolled up my sleeves and voilà :)!

If you want to bring balance to the force and want a simple but flexible solution for displaying and filtering asynchronous data, give it a try.

Key Features

• Declarative configuration
• Filterable
• Sortable
• Selectable rows
• Customizable loading screen
• Customizable expandable rows
• Customizable columns
• Customizable Grid View
• CRUD Buttons with customizable icons
• Translatable
• Pagination
• Based on Bootstrap 4

Requirements

React Async Table component requires the following to be installed in your project:

• bootstrap >= 4.0.0
• react >= 16.3.0

• react-dom >= 16.3.0

Installation

Open the terminal, cd into your project folder and run one of the commands below depending on your package manager.

npm install react-async-table
yarn add react-async-table

Basic Example

import React from 'react';
import ReactAsyncTable from 'react-async-table';
import 'react-async-table/dist/index.css';

// Table Data
const tasks = [ ... ];
// Column setup
const columns = [
  {
    dataField: 'id',
    text: 'ID'
  },
  {
    dataField: 'userId',
    text: 'User ID'
  },
  {
    dataField: 'title',
    text: 'Task',
    columnHeaderClass: 'some-css-class', // CSS class for the th for that particular column
    columnDataClass: 'some-css-class' // CSS class for the td for that particular column
  },
  {
    dataField: 'completed',
    text: 'Status',
  }
];

class Example extends React.Component {
  render() {
    return (
      <ReactAsyncTable
        keyField="id"
        columns={columns}
        query={''}
        items={tasks}
        currentPage={1}
        itemsPerPage={10}
        totalItems={tasks.length}
      />
    );
  }
}

export default Example;

Full Example

import React from 'react';
import 'bootstrap/scss/bootstrap.scss';
import 'font-awesome/css/font-awesome.min.css';
import { Card, CardHeader, CardBody } from 'reactstrap';
import ReactAsyncTable from 'react-async-table';
import 'react-async-table/dist/index.css';

const tasks = [ ... ];

const ExampleLoader = () => (
  <p>This is an example loader component...</p>
);

const ExampleHeaderActions = ({ onHeaderAction }) => (
  <span>
    <button
      type="button"
      className="btn btn-secondary"
      data-html="true"
      data-toggle="tooltip"
      title="Action 1"
      onClick={e => onHeaderAction('HEADER_ACTION_1')}
    >
      <i className="fa fa-pencil" />
    </button>
    <button
      type="button"
      className="btn btn-secondary"
      data-html="true"
      data-toggle="tooltip"
      title="Action 2"
      onClick={e => onHeaderAction('HEADER_ACTION_2')}
    >
      <i className="fa fa-wrench" />
    </button>
  </span>
);

const ExampleGridItemComponent = ({ row, onAction }) => {
  const columnIcon = row['completed'] ? 'fa fa-check' : 'fa fa-times';
  const columnText = row['completed'] ? 'Completed' : 'Pending';

  return (
    <div className="card mb-2">
      <div className="card-header">Task</div>
      <div className="card-body" style={{ height: '80px' }}>
        <p>{row["title"]}</p>
      </div>
      <div className="card-footer">
        <span style={{ lineHeight: '2rem'}}><i className={columnIcon} /> {columnText}</span>
        <span className="float-right">
          <button
            type="button"
            className="btn btn-light"
            onClick={e => onAction(e, 'EDIT_ITEM')}
            data-html="true"
            data-toggle="tooltip"
            title="Edit Item"
          >
            <i className="fa fa-pencil" />
          </button>
          <button
            type="button"
            className="btn btn-light"
            data-toggle="tooltip"
            title="Custom Action"
            onClick={e => onAction(e, 'CUSTOM_ACTION')}
          >
            <i className="fa fa-plus" />
          </button>
          <button
            type="button"
            className="btn btn-light"
            data-toggle="tooltip"
            title="Delete Item"
            onClick={e => onAction(e, 'DELETE_ITEM')}
          >
            <i className="fa fa-minus" />
          </button>
        </span>
      </div>
    </div>
  )
};

const ExampleFormatedField = ({ columnKey, row, onColumnClick }) => {
  const columnIcon = row[columnKey] ? 'fa fa-check' : 'fa fa-times';
  const columnText = row[columnKey] ? 'Completed' : 'Pending';
  const onClick = () => onColumnClick(columnKey, row);

  return (
    <button className="btn btn-link" onClick={onClick}>
      <i className={columnIcon} /> {columnText}
    </button>
  );
}

const ExampleActionsComponent = ({ row, onAction }) => {
  return (
    <span>
      <button
        type="button"
        className="btn btn-link"
        onClick={e => onAction(e, 'EDIT_ITEM')}
        data-html="true"
        data-toggle="tooltip"
        title="Edit Item"
      >
        <i className="fa fa-pencil" />
      </button>
      <button
        type="button"
        className="btn btn-link"
        data-toggle="tooltip"
        title="Custom Action"
        onClick={e => onAction(e, 'CUSTOM_ACTION')}
      >
        <i className="fa fa-plus" />
      </button>
      <button
        type="button"
        className="btn btn-link"
        data-toggle="tooltip"
        title="Delete Item"
        onClick={e => onAction(e, 'DELETE_ITEM')}
      >
        <i className="fa fa-minus" />
      </button>
    </span>
  );
}

const ExpandableRowComponent = ({ row }) => {
  return (
    <p>Testing expandable row custom component Row ID: {row.id}</p>
  );
}

const columns = [
  {
    dataField: 'id',
    text: 'ID'
  },
  {
    dataField: 'userId',
    text: 'User ID',
  },
  {
    dataField: 'title',
    text: 'Task',
    tooltip: 'Example Tooltip',
    sort: true,
    sortOrder: 'default' // values: default|asc|desc
  },
  {
    dataField: 'completed',
    text: 'Status',
    formatedField: ExampleFormatedField
  }
];

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      search: '',
      items: [],
      page: 1,
      itemsPerPage: 12,
      totalItems: 0
    };

    this.fakeAsyncAction = this.fakeAsyncAction.bind(this);
    this.onChangePage = this.onChangePage.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.onInsert = this.onInsert.bind(this);
    this.onEdit = this.onEdit.bind(this);
    this.onMultipleDelete = this.onMultipleDelete.bind(this);
  }

  componentDidMount() {
    this.fakeAsyncAction();
  }

  fakeAsyncAction() {
    const dataDelay = Math.floor(Math.random() * (1000 - 300 + 1) + 300);

    setTimeout(() => {
      const { search, page, itemsPerPage } = this.state;
      const currentIndex = (page - 1) * itemsPerPage;

      const filteredItems = tasks.filter(item => item.title.indexOf(search.toLowerCase()) !== -1);

      this.setState(() => ({
        isLoading: false,
        items: filteredItems.slice(currentIndex, currentIndex + itemsPerPage),
        totalItems: filteredItems.length,
      }));
    }, dataDelay);
  }

  onChangePage(page) {
    this.setState({ page, isLoading: true });
    this.fakeAsyncAction();
  }

  onSearch(search) {
    console.log("query", search);
    this.setState({ search, page: 1, isLoading: true });
    this.fakeAsyncAction();
  }

  onSort(sortField, sortOrder) {
    console.log('onSort handler');
    console.log('sortField:', sortField);
    console.log('sortOrder:', sortOrder);
  }

  onInsert() {
    console.log('onInsert handler');
  }

  onEdit(rowID, row) {
    console.log('onEdit handler');
    console.log('id:', rowID);
    console.log('row:', row);
  }

  onDelete(rowID, page) {
    console.log('onDelete handler');
    console.log('id:', rowID);
    console.log('page:', page);
  }

  onHeaderAction(type) {
    console.log('onHeaderAction handler');
    console.log('type:', type);
  }

  onAction(type, row) {
    console.log('onAction handler');
    console.log('type:', type);
    console.log('row:', row);
  }

  onMultipleDelete(values, page) {
    console.log('onMultipleDelete handler');
    console.log('ids:', values);
    console.log('page:', page);
  }

  onColumnClick(columnKey, row) {
    console.log('onColumnClick handler');
    console.log('column:', columnKey);
    console.log('row data:', row);
  }

  render() {
    const { isLoading, items, page, itemsPerPage, totalItems  } = this.state;

    return (
      <div className="container">
        <Card>
          <CardHeader>
            <span className="btn btn-outline-light active btn-no-click">
              <b> React Async Table Example</b>
            </span>
          </CardHeader>
          <CardBody>
            <ReactAsyncTable
              keyField="id"
              activeTabID=""
              isLoading={isLoading}
              displayHeaderSection={true}
              splitView={false}
              flexView={false} // table/grid view
              layoutType="FLEX_VIEW" // available layout types: SIMPLE_VIEW, FLEX_VIEW
              bootstrapCheckbox={false}
              requestFailed={false}
              columns={columns}
              items={items}
              tableClass="table-outline"
              tableHeaderClass="thead-light"
              currentPage={page}
              itemsPerPage={itemsPerPage}
              totalItems={totalItems}
              delay={300}
              options={{
                searchBox: true,
                insertButton: true,
                multipleSelect: true,
                expandable: true,
                actionsColumn: true,
                pagination: true
              }}
              translations={{
                searchPlaceholder: 'Search...',
                addButton: 'Add',
                deleteButton: 'Delete',
                listViewTitle: "List View",
                gridViewTitle: "Grid View",
                sortTitle: 'Sort',
                actionsColumnTitle: 'Actions',
                editAction: 'Edit',
                deleteAction: 'Delete',
                noDataText: 'No data found',
                requestFailedText: 'API request failed',
                paginationFirst: 'First',
                paginationLast: 'Last'
              }}
              icons={{
                addButtonIcon: 'fa fa-plus',
                deleteButtonIcon: 'fa fa-trash',
                listViewIcon: "fa fa-list",
                gridViewIcon: "fa fa-th",
                tooltipIcon: 'fa fa-question',
                sortIcon: 'fa fa-sort',
                sortIconASC: 'fa fa-sort-asc',
                sortIconDESC: 'fa fa-sort-desc',
                expandIcon: 'fa fa-expand',
                editActionIcon: 'fa fa-pencil',
                deleteActionIcon: 'fa fa-trash'
              }}
              loader={ExampleLoader}
              headerActions={ExampleHeaderActions}
              gridItemComponent={ExampleGridItemComponent}
              actionsComponent={ExampleActionsComponent}
              expandableRowComponent={ExpandableRowComponent}
              onChangePage={this.onChangePage}
              onSearch={this.onSearch}
              onSort={this.onSort}
              onColumnClick={this.onColumnClick}
              onInsert={this.onInsert}
              onEdit={this.onEdit}
              onDelete={this.onDelete}
              onHeaderAction={this.onHeaderAction}
              onAction={this.onAction}
              onMultipleDelete={this.onMultipleDelete}
            />
          </CardBody>
        </Card>
      </div>
    );
  }
}

export default Example;

Testing & Development

Install the latest version of node and npm on your system, then follow the steps below.

# Clone the repo
$ git clone https://github.com/mjakal/react-async-table.git

# Change dir to the cloned repo
$ cd react-async-table

# Install all dependencies
$ npm install

# Start the development server
$ npm start

# Open the new terminal and cd into repo/example dir
$ cd react-async-table/example

# Run the example dev server and go to localhost:3000
$ npm start

Other useful commands

# Create production build
$ npm run build

# Run linter
$ npm run test:lint

# Run test suite
$ npm run test

# Deploy example project to github pages
$ npm run deploy