Skip to content

readme.md

Latest commit

 

History

History
210 lines (163 loc) · 6.67 KB

readme.md

File metadata and controls

210 lines (163 loc) · 6.67 KB

TableNex - A Next-Gen React Table Component

TableNex Banner

Say goodbye to the hassle of <tr> and <td> chaos—TableNex offers an effortless, customizable, and responsive solution for modern tables. Built with React and TypeScript, it’s perfect for lists, dashboards, or complex datasets.

Why TableNex?

  • Effortless Setup: Define data and columns(optional) no manual HTML.
  • Customizable: Tailor styles and colors to your project.
  • Responsive: Works on desktop and mobile.
  • Advanced Features: Fixed columns, expanded rows, and more.
  • Developer-Friendly: TypeScript-ready with error catching.

Installation

Install via npm:

npm install react-tablenex

Getting Started

Here’s a simple table: Next, import the component and its CSS in your file:

Quick Start

Here’s a simple example to get you started. This creates a basic table with some employee data:

import TableNex from "react-tablenex";
import "react-tablenex/style.css";

function MyTable() {
  const data = [
    {
      id: 1,
      name: "John",
      age: 28,
      job: "Coder",
      salary: 75000,
      location: "New York",
      country: "USA",
    },
    {
      id: 2,
      name: "Jane",
      age: 34,
      job: "Designer",
      salary: 85000,
      location: "San Francisco",
      country: "USA",
    },
  ];

  return <TableNex data={data} />;
}

export default MyTable;
  • data: An array of objects where each object is a row.

Save this in a .jsx or .tsx file, run your app, and you’ll see a table!

Props Overview

TableNex comes with many options (props) to customize your table. Here’s a beginner-friendly breakdown:

Prop Type Default Description
data Object[] Required Your table data as an array of objects (e.g., [{ id: 1, name: "John" }]).
columns TableColumn[] [] Defines table columns (e.g., { accessor: "name", header: "Name" }).
keyField string | { keyId: string; isVisible: boolean } { keyId: "id", isVisible: true } The unique field in data (e.g., "id") or an object with keyId (the key) and isVisible (whether to show the column) for row identification.
fixedColumns string[] [] Columns to "stick" (stay visible when scrolling).
styledRows StyledRow[] [] Custom styles for specific rows by their key value.
styledColumns StyledColumn[] [] Custom styles for specific columns by their accessor.
expandedRows ExpandedRow[] [] Extra rows that expand below specific rows.
footer FooterRow[] [] Rows to show at the bottom of the table.
noDataMessage string or ReactNode "No data found" What to show if data is empty.
colorScheme Partial<ColorScheme> See below Colors for the table (e.g., { PRIMARY: "#fff" }).
responsive boolean false Makes the table adapt to mobile screens.
styles Partial<TableStyles> See below Controls spacing, borders, and rounded corners.

Default colorScheme

{
  "PRIMARY": "transparent",
  "SECONDARY": "#aac6f73b",
  "ACCENT": "#aac6f73b",
  "BORDER": "#aac6f757",
}

Default styles

{
  "rounded": "sm",
  "spacing": "md",
  "columnBorder": "none",
  "rowBorder": "sm",
  "fontSize": "0.9rem"
}

Tip: Use "sm", "md", "lg", "xl", or "none" for rounded, spacing, columnBorder, and rowBorder.

Responsive Table with Footer

A more advanced table with responsive design and a footer:

import TableNex from "react-tablenex";
import "react-tablenex/style.css";

function FullTable() {
  const data = [
    {
      employeeId: 1,
      name: "John",
      salary: 75000,
      location: "New York",
      country: "USA",
    },
    {
      employeeId: 2,
      name: "Jane",
      salary: 95000,
      location: "San Francisco",
      country: "USA",
    },
  ];

  const columns = [
    { accessor: "employeeId", header: "Employee ID" },
    { accessor: "name", header: "Employee" },
    { accessor: "salary", header: "Salary ($)" },
    { accessor: "location", header: "Location" },
    { accessor: "country", header: "Country" },
  ];

  const footer = [
    {
      cells: [
        { content: "Total", style: { fontWeight: "bold" }, colSpan: 4},
        { content: "$170,000" },
      ],
    },
  ];

  return (
    <TableNex
      data={data}
      keyField="employeeId"
      columns={columns}
      footer={footer}
      responsive={true}
      styles={{ rounded: "lg", spacing: "lg", columnBorder: "sm" }}
    />
  );
}

export default FullTable;
  • responsive={true} makes it mobile-friendly.
  • footer shows a summary row.
  • styles adjusts the look with larger corners and spacing.

keyField Note

  • Defaults to "id". Set it to a unique column (e.g., "employeeId") if your data uses something else. It’s key for features like styling rows or expanding content.

More Features

  • Fixed Columns: Pin with fixedColumns={["orderId"]}.
  • Expanded Rows: Add details with expandedRows={[{ afterRowKey: "#1001", element: <div>Details</div> }]}.
  • Footer: Summarize with footer={[{ cells: [{ content: "Total" }] }]}.
  • Tailwind: Use className (e.g., !bg-red-500) in styledRows/styledColumns.

Styling

TableNex uses CSS custom properties for easy theming. You can:

  1. Use the Default CSS: Import "react-tablenex/style.css".
  2. Override with Props: 
    <TableNex
  data={data}
  colorScheme={{ PRIMARY: "#f0f0f0", BORDER: "#000" }}
  styles={{ fontSize: "1rem", rowBorder: "lg" }}
/>
  3. Add Custom CSS: Use classes like .tablenex_table, .tablenex_row, etc., from your own stylesheet.

Check your browser’s developer tools to see all available classes!

Learn More

Check the full documentation for advanced usage and TypeScript details.

Happy coding with TableNex!