ez-react-table v2.0.8

Features

• 💻 virtualized rows
• 🔽 built in sorting
• 📄 column pagination
• ↔️ column resize
• 🕵 global search
• 🌊 overflow management with tool tips
• 🔨customizable toolbar
• ✅ selectable rows

Installation

Install ez-react-table with npm

  npm install ez-react-table

Usage/Examples

Simple

import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/styles.css";

function App() {
  return (
    <div>
      <EzReactTable
        cols={[
          {
            title: "First",
            key: "first",
          },
          {
            title: "Last",
            key: "last",
          },
        ]}
        data={[
          { first: "Michael", last: "Myers" },
          { first: "Laurie", last: "Strode" },
          { first: "Samuel", last: "Loomis" },
        ]}
      />
    </div>
  );
}

Configuration

Component properties

Component toolbar property

the toolbar component recieves 2 properties defined below

Column Configuration

Column Configuration format function

(value, object) => <span>{value}</span>;

Styles

Apply default styles

import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/main.css";
import "ez-react-table/lib/styles.css";

For custom styles, copy ez-react-table/lib/styles.css and modify as needed.

import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/main.css";
import "./styles.css";

Acknowledgements

• react-window
• simple-bar
• tippy.js

Authors

• @rowlinsonmike