@cradlesoft/advanced-react-table
TypeScript icon, indicating that this package has built-in type declarations

1.0.32 • Public • Published

Advanced React Table

A react table with support for freezing columns and rows.

Sample

INSTALLATION

On node command line type: npm i @cradlesoft/advanced-react-table to install

USAGE

import * as React from "react";
import styles from "./App.module.scss";
import rows from "./sample.json";

import Table from "@cradlesoft/advanced-react-table";

function App() {
  const columns = [
    {
      width: 30,
      id: "Column1",
      title: " ",
    },
    {
      width: 100,
      id: "Column2",
      title: "A",
    },
    {
      width: 100,
      id: "Column3",
      title: "B",
    },
    {
      width: 100,
      id: "Column4",
      title: "C",
    },
    {
      width: 100,
      id: "Column5",
      title: "D",
    },
    {
      width: 200,
      id: "Column6",
      title: "E",
    },
    {
      width: 200,
      id: "Column7",
      title: "F",
    },
    {
      width: 200,
      id: "Column8",
      title: "G",
    },
    {
      width: 200,
      id: "Column9",
      title: "H",
    },
    {
      width: 300,
      id: "Column10",
      title: "I",
    },
    {
      width: 200,
      id: "Column4",
      title: "J",
    },
    {
      width: 200,
      id: "Column4",
      title: "K",
    },
    {
      width: 300,
      id: "Column4",
      title: "L",
    },
    {
      width: 200,
      id: "Column4",
      title: "M",
    },
    {
      width: 300,
      id: "Column4",
      title: "N",
    },
  ];

  return (
    <div className={styles.App}>
      <Table
        // hideColumnHeaders
        freezeColumnHeaders
        freezeFirstColumn
        freezeRows={0}
        freezeColumns={1}
        headerRowStyle={{ padding: 5 }}
        cellStyle={{ padding: 5 }}
        cellClass={styles.Cell}
        headerRowClass={styles.Header}
        columns={columns}
        rows={rows}
      />
    </div>
  );
}

export default App;

Checkout the full sample code in codesandbox

OPTIONS

Name Type Default Value Description
hideColumnHeaders boolean false If true, column headers will not be renadered
freezeColumnHeaders boolean false If true, the row containing the column headers should be frozen.
freezeFirstColumn boolean false If true the first column will be frozen.
freezeRows number 0 The number of rows to freeze in addition to the column header row
freezeColumns number 0 The number of columns to freeze
headerRowStyle React.CSSProperties false CSS style that will be applied to each table cell in the header row.
cellStyle React.CSSProperties false CSS style that will be applied to other cells in the table.
cellClass string false CSS class that will be added to each cell in the header row.
headerRowClass string false CSS class that will be added to other cells in the table.
columns object array [] An array of objects describing the columns of the table.
row object array [] An array of objects containing the actual records of the table.

Package Sidebar

Install

npm i @cradlesoft/advanced-react-table

Weekly Downloads

2

Version

1.0.32

License

ISC

Unpacked Size

151 kB

Total Files

25

Last publish

Collaborators

  • koladei