react-generic-table

1.0.4 • Public • Published

react-generic-table

A generic but very usable table component for react with built-in sorting, configurable cell rendering & item counts, actions support with callbacks, out-of-the-box sorting & loading states and more!

NPM JavaScript Style Guide

Introduction

react-generic-table is a generic table component for react to display data in a table format. It supports custom cell rendering, configurable item counts, actions with callbacks, out-of-the-box sorting & loading states and much more!

Check out examples here!

Install

Npm:

npm install --save react-generic-table

Yarn:

yarn add --save react-generic-table

Usage

import React, { Component } from 'react'

import GenericTable from "react-generic-table";
import "react-generic-table/dist/index.css";

function Example() {
    return(
      <GenericTable
        objArray={[
          { id: 1, name: "J.W.", age: "25", profession: "Developer" },
          { id: 2, name: "Lea", age: "22", profession: "Journalist" },
          { id: 3, name: "Max", age: "34", profession: "Taxi Driver" }
        ]}
        columns={["name", "age", "profession"]}
        {...options}
      />
    )
}

Options

Name Type Default Description
objArray Array null Array of objects to display in table (Defaults to null which triggers table loading state)
columns Array [] Array of column names or objects with key as column name and options as value to display in the table
actions Array undefined Array of action objects with key as action name and value as element function to display in the table (function has access to full row object)
entityName String null Name of entity to display in table (Defaults to item as generic entity name, useful for making empty state and new links more specific)
onAction function () => {} Callback function to handle actions (has access to the action and the full row object)
showCount boolean false Whether to show count of entities in table
newLink string null Whether to show a link to add new entities to the table (Value is link address)
actionsColumnName string Actions Custom name for the actions column
sorting boolean true Whether to enable sorting on columns

Column Options

Columns can be specified as an array of strings or objects. If specified as a string, the column name will be used as the key and the column header will be the capitalized column name. If specified as an object, the key will be used as the column name and the value will be an object with the following options:

Name Type Default Description
alias string null Column header to display in table (Useful if the key in the object is different than the desired column name)
capitalize boolean true Whether to capitalize the values in the column rows
onClick function null Callback function to handle click events on a row value in the column (has access to the full row object)
Any prop any null Any other prop will be passed to the cell component (useful for custom cell rendering)

Features

  • 🚀 Simple syntax
  • ⚙️ Minimal config
  • 🎨 Customizable
  • 🌙 Supports Dark Mode
  • 🔍 Out-of-the-box sorting
  • ⌛ Built-in loading state
  • 📭 Built-in empty state
  • ➕🔗 Built-in new link
  • 🔧 Built-in row actions column
  • 🔨 Built-in row actions
  • 🔄 Built-in action callbacks
  • 📊 Built-in count display

License

MIT © alianza

Readme

Keywords

none

Package Sidebar

Install

npm i react-generic-table

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

106 kB

Total Files

7

Last publish

Collaborators

  • phyrexalianza