react-condensed

A fully customisable react component to build tables and datagrids

Install

npm i --save react-condensed

Features

Usage

import React from "react";
import { Table } from "react-condensed";

const App = () => {

  const Columns = [
    {
      name: "Name",
      accessor: (row) => row.firstName + row.lastName,
      searchable: true,
    },
    {
      name: "Age",
      accessor: "age",
    },
    {
      name: "Gender",
      accessor: "gender",
    },
    {
      name: "Email",
      accessor: "email",
    },
  ];

  const data = [
    {
      id: 1,
      firstName: "Terry",
      lastName: "Medhurst",
      age: 50,
      gender: "male",
      email: "[email protected]",
    },
    {
      id: 2,
      firstName: "Sheldon",
      lastName: "Quigley",
      age: 28,
      gender: "male",
      email: "[email protected]",
    },
    {
      id: 3,
      firstName: "Terrill",
      lastName: "Hills",
      age: 38,
      gender: "male",
      email: "[email protected]",
    },
    {
      id: 4,
      firstName: "Miles",
      lastName: "Cummerata",
      age: 49,
      gender: "male",
      email: "[email protected]",
    },
    {
      id: 5,
      firstName: "Mavis",
      lastName: "Schultz",
      age: 38,
      gender: "male",
      email: "[email protected]",
    },
  ];

  return (
    <Table
      columns={Columns}
      data={data}
      styleVariables={{ "font-family": "cursive" }}
    />
  );
};

export default App;

Props

Column Props

Style Variables

Global classnames