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!

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