Prototable NPM

A simple and powerful Datatable for React based.

Demo and documentation

Prerequisites

Installation

1.Install package

To install prototable with npm:

npm install prototable classnames date-fns --save

Usage

Here is a basic example of using prototable within a react application.

import React, { useEffect } from "react";
import "./styles.css";
import ProtoTable from "prototable";
import "prototable/index.css";
import mockedData from "./mockdata";

const selectOptions = [
  { value: "E", label: "Evet Evet Evet Evet Evet Evet Evet" },
  { value: "H", label: "Hayır" }
];

const gridOptions = {
  title: "Sample Data Grid",
  noData: {
    // icon: <div></div>,
    title: "No DATA"
  },
  deletable: {
    message: "Are you sure you want to delete this row?",
    onRowDeleteCancel: (row: any) =>
      new Promise((resolve, reject) => {
        resolve(true);
      }),
    onRowDelete: (row: any) =>
      new Promise((resolve, reject) => {
        resolve(true);
      })
  },
  editable: {
    onRowUpdate: (row: any) =>
      new Promise((resolve, reject) => {
        resolve(true);
      }),

    onRowUpdateCancel: (row: any) =>
      new Promise((resolve, reject) => {
        resolve(true);
      })
  },
  pagination: {
    pageable: true,
    pageSize: 10,
    onPageChanged: (pageNumber: number) => {
      console.log(pageNumber)
    }
  },
  selection: {
    multiSelect: true,
    onSelectionChange: (row: any) => {
      console.log(JSON.stringify(row));
    }
  },
  onRowSelection: (row: any) => {
    console.log("onRowSelection", row);
  },
  actions: [
    {
      title: 'Delete',
      icon: "Sil",
      onClick: (row: any, id: number) => {
        let dataArray = dataTable.getDataArray()
        dataArray.splice(id, 1)
        dataTable.loadWithDataArray(dataArray)
      }
    },
  ],
  detail: {
    title: ' ',
    render: (row: any) => {
      return <p>{row.id}</p>
    }
  },
  columns: [
    {
      title: "Company Code",
      prop: "kurumKod",
      filterable: true,
      style: { textAlign: "left", paddingLeft: 10, width: 100 },
      validation: (row: any, rawValue: any) => {
        const toNumbered = !isNaN(rawValue) && !isNaN(parseFloat(rawValue));
        const isValid = toNumbered ? null : "Validation message is here";
        return isValid;
      },
      editable: true
    },
    {
      title: "Company Name",
      prop: "kurumAd",
      filterable: true
    },
    {
      title: "Account No",
      prop: "hesapNo",
      sortable: false
    },
    {
      title: "Type",
      prop: "sozlesmeTuru"
    },
    {
      title: "Status",
      prop: "durum",
      filterable: true,
      validation: (row: any, rawValue: any) => {
        const toNumbered = !isNaN(rawValue) && !isNaN(parseFloat(rawValue));
        const isValid = toNumbered ? null : "Validation message is here";
        return isValid;
      },
      render: (rawValue: any, row: any, idx: number, length: number) => {
        return selectOptions.find((o) => o.value === rawValue)?.label;
      },
      editable: {
        type: "SELECT",
        selectOptions: selectOptions
      }
    },
    {
      title: "Account Opening Time",
      prop: "date"
    },
    {
      title: "Ratio",
      prop: "ratio",
      editable: true,
      validation: (row: any, rawValue: any) => {
        const toNumbered = !isNaN(rawValue) && !isNaN(parseFloat(rawValue)); 
        const isValid = toNumbered ? null : "Validation message is here";
        return isValid;
      }
    }
  ]
};
export default function App() {
  useEffect(() => {
    dataTable.loadWithDataArray(mockedData);
  });
  return (
    <div className="App">
      <h1>Hello EveryOne</h1>
      <ProtoTable
        ref={(table: any) => (dataTable = table)}
        buildRowOptions={(row: any, rowId: number) => {
          return {
            className: "customClassName",
            style: {
              height: 50,
              // backgroundColor: rowId % 2 === 0 ? 'gray' : 'white'
            }
          };
        }}
        gridOptions={gridOptions}
      />
    </div>
  );
}