Superior React Table

A multilanguage, editable, addable, removable, sortable, detailed searchable, responsive table component for react.

Installation

npm install superior-react-table

Live Demo

https://halidunal.github.io > Portfolio > Superior React Table

Example Code

import React, { useState } from 'react'
import Table from 'superior-react-table';
import { openModal } from '../../store/services/modalService';

export default function Index(){
  const [editSelectedId,setEditSelectedId] = useState(0);
  const [customers, setCustomers] = useState<ICustomer[]>(
    [
      {
        "id": 1,
        "last_name": "Doe",
        "first_name": "John",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": false,
        "mobile_phone": "(123)555-0103",
        "profession_code": 345,
        "birthday": "1981-06-11",
        "city": "New Jersey",
        "gross_salary": "6000$+"
      },
      {
        "id": 2,
        "last_name": "Gratacos Solsona",
        "first_name": "Antonio",
        "email_address": "[email protected]",
        "job_title": "Owner",
        "is_active": true,
        "mobile_phone": "(123)555-0101",
        "profession_code": 555,
        "birthday": "1989-09-29",
        "city": "Boston",
        "gross_salary": "-2000$"
      },
      {
        "id": 3,
        "last_name": "Axen",
        "first_name": "Thomas",
        "email_address": "[email protected]",
        "job_title": "Purchasing Representative",
        "is_active": false,
        "mobile_phone": "(123)555-0101",
        "birthday": "1976-06-25",
        "city": "Los Angelas",
        "gross_salary": "4000-6000$"
      },
      {
        "id": 4,
        "last_name": "Lee",
        "first_name": "Christina",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": true,
        "mobile_phone": "(123)555-0101",
        "profession_code": 101,
        "birthday": "1993-01-15",
        "city": "New York",
        "gross_salary": "4000-6000$"
      },
      {
        "id": 5,
        "last_name": "O’Donnell",
        "first_name": "Martin",
        "email_address": "[email protected]",
        "job_title": "Owner",
        "is_active": true,
        "mobile_phone": "(123)555-0101",
        "profession_code": 222,
        "birthday": "1999-11-11",
        "city": "Minneapolis",
        "gross_salary": "2000-4000$"
      },
      {
        "id": 6,
        "last_name": "Pérez-Olaeta",
        "first_name": "Francisco",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": false,
        "mobile_phone": "(123)555-0100",
        "profession_code": 333,
        "birthday": "1992-11-01",
        "city": "Milwaukee",
        "gross_salary": "4000-6000$"
      },
      {
        "id": 7,
        "last_name": "Xie",
        "first_name": "Ming-Yang",
        "email_address": "[email protected]",
        "job_title": "Owner",
        "is_active": true,
        "mobile_phone": "(123)555-0100",
        "birthday": "1997-12-10",
        "city": "Boise",
        "gross_salary": "4000-6000$"
      },
      {
        "id": 8,
        "last_name": "Andersen",
        "first_name": "Elizabeth",
        "email_address": "[email protected]",
        "job_title": "Purchasing Representative",
        "is_active": true,
        "mobile_phone": "(123)555-0100",
        "profession_code": 444,
        "birthday": "2001-12-30",
        "city": "Portland",
        "gross_salary": "4000-6000$"
      },
      {
        "id": 9,
        "last_name": "Mortensen",
        "first_name": "Sven",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": false,
        "mobile_phone": "(123)555-0101",
        "profession_code": 555,
        "birthday": "1989-05-02",
        "city": "Salt Lake City",
        "gross_salary": "2000-4000$"
      },
      {
        "id": 10,
        "last_name": "Wacker",
        "first_name": "Roland",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": false,
        "mobile_phone": "(123)555-0101",
        "profession_code": 123,
        "birthday": "1990-04-20",
        "city": "Chicago",
        "gross_salary": "-2000$"
      },
      {
        "id": 11,
        "last_name": "Krschne",
        "first_name": "Peter",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": true,
        "mobile_phone": "(123)555-0101",
        "profession_code": 444,
        "birthday": "1996-04-09",
        "city": "Miami",
        "gross_salary": "6000$+"
      },
      {
        "id": 12,
        "last_name": "Edwards",
        "first_name": "John",
        "email_address": "[email protected]",
        "job_title": "Purchasing Manager",
        "is_active": false,
        "mobile_phone": "(123)555-0101",
        "profession_code": 123,
        "birthday": "1995-03-19",
        "city": "Las Vegas",
        "gross_salary": "6000$+"
      }
    ]
  );

  interface ICustomer {
    id?: any,
    last_name?: string,
    first_name?: string,
    email_address?: string,
    job_title?: string,
    is_active?: boolean,
    mobile_phone?: string,
    profession_code?: number,
    birthday?: string,
    city?: string,
    gross_salary?: string
  }

  const [editRowData, setEditRowData] = useState<ICustomer>({
    last_name: "",
    first_name: "",
    email_address: "",
    job_title: "",
    is_active: true,
    mobile_phone: "",
    profession_code: 0,
    birthday: "",
    city: "",
    gross_salary: ""
  });

  const handleEditRowChange = (event: any) => {
    var fieldName = event.target.getAttribute("name");
    var fieldValue = event.target.classList[0] !== "h-checkbox" ? event.target.value : event.target.checked;
    var newRowData: ICustomer = {...editRowData}
    newRowData[fieldName as keyof ICustomer] = fieldValue;
    setEditRowData(newRowData);
  };

  const handleEdit = (event: any, data: any) => {
    event.preventDefault();
    setEditSelectedId(data[0]);
    Object.keys(editRowData).map((item: any, key: any) => {
      editRowData[item as keyof ICustomer] = data[key+1]
    })
  };

  const handleEditRowSubmit = (event: React.SyntheticEvent, isNew: boolean) => {
    event.preventDefault();
    const editedData: ICustomer = {};
    Object.keys(editRowData).map((item: any, key: any) => {
      if(key === 0){
        editedData.id = editSelectedId;
      }
      editedData[item as keyof ICustomer] = editRowData[item as keyof ICustomer]
    })
    if(isNew) {
      customers.shift();
      editedData.id = customers.length ? (customers[customers.length-1].id)+1 : 1;
      setCustomers([editedData, ...customers]);
			toast.success("Add process successful");
    }else{
      let index = customers.findIndex(item => item.id === editSelectedId);
      customers[index] = editedData;
			toast.success("Update process successful");
    }
    setEditSelectedId(0);
  };

  const handleRemove = (id: string) => {
    setCustomers(customers.filter(item => item.id !== id))
		toast.success("Delete process successful");
  }

  const handleRemoveAll = () => {
    setCustomers([]);
		toast.success("Delete process successful");
  }

  const handleAddNew = () => {
    Object.keys(editRowData).map((item: any) => {
      editRowData[item as keyof ICustomer] = "";
    })
    setEditSelectedId(0);
    if(!customers.length) {
      setCustomers([{id:0,...editRowData}, ...customers]);
    }else{
      if(customers[0].id != 0) setCustomers([{id:0,...editRowData}, ...customers]);
    }
  }

  const handleClose = (isNew: boolean) => {
    setEditSelectedId(0);
    if(isNew) {
      setCustomers(customers.filter(item => item.id !== 0))    }
  }

  const handleOpenModal = (customers: ICustomer) =>{
    openModal("edit-customer-modal", "Edit Customer Informations", customers);
  }

  const tableProps = {
    theme:'dark',
    language: "en",
    addable:true,
    editable:'inline',
    removeAll:true,
    searchable:true,
    dataPerPage: 10,
    editRowData,
    editSelectedId,
    handleAddNew,
    handleEdit,
    handleEditRowChange,
    handleEditRowSubmit,
    handleRemove,
    handleRemoveAll,
    handleOpenModal,
    handleClose,
    columns:[
      {field: "last_name", title: "Last Name", sortable: true, align:"right"},
      {field: "first_name", title:"First Name", sortable: true},
      {field: "email_address", title:"Email Adress", sortable: true},
      {field: "job_title", title:"Job Title", sortable: true},
      {field: "is_active", title:"Is Active?", type: "checkbox", width: 80, align:"center"},
      {field: "mobile_phone", title:"Mobile Phone", sortable: true},
      {field: "profession_code", title:"Profession Code", type: "number", sortable: true, nullable: true},
      {field: "birthday", title:"Birthday", type: "date", sortable: true, width: 100},
      {field: "city", title:"City", sortable: true},
      {field: "gross_salary", title:"Gross Salary", sortable: true, type: "select", data:["-2000$","2000-4000$","4000-6000$","6000$+"], width: 120},
      {title: "", width:75} //command cell 
    ],
    fields:customers.map((item: ICustomer) => ([
      item.id,
      item.last_name,
      item.first_name,
      item.email_address,
      item.job_title,
      item.is_active,
      item.mobile_phone,
      item.profession_code,
      item.birthday,
      item.city,
      item.gross_salary
    ]))
  }

  return (
    <div>
      <Table {...tableProps}/>
    </div>
  )
}

API

|Prop |Description |Default |Optional |Type |----------------|-------------------------------|-----------------------------|-----------------------------|-----------------------------| |fields|data fields||false|array |columns|field containing 'title'', 'align', 'width', 'sortable', 'visibility', 'type', 'data'(for select) ||false|array |columns.field|column field||false|string |columns.title|column title (if null the title will be like columns.field)||true|string |columns.align|cell text align. 'left', 'right' or 'center'|left|true|string |columns.width|cell width|150|true|number |columns.sortable|column sort|false|true|bool |columns.nullable|cell validator (if true it run validate for the cell)|false|true|bool |columns.visibility|column visibility for only popup edit|false|true|bool |columns.type|field type 'string', 'number', 'date', 'select' or 'checkbox'|'string'|true|string |columns.data|select data (if the field type is 'select')||true|string array |language|language 'en', 'tr', 'ru', 'de', 'cn', 'hi', 'es', 'fr', 'it', 'ar'|'en'|true|string |searchable|client side search (detailed search with column title. for example:'First Name:John')|false|true|bool |editable|editable row prop 'inline' or 'popup'|false|true|string |blurEdit|if another line is clicked at the time of editing, the editing is canceled|false|true|bool |addable|addable prop (if true the add button will be visible)|false|true|bool |removeAll|remove all (if true the remove all button will be visible)|false|true|bool |dataPerPage|determines how much data is displayed per page|100|true|number |mobileViewWidth|switches to mobile view when the screen pixel is smaller than the specified pixel|500|true|number |loading|loading prop(dynamic)|false|true|bool |theme|styled themes 'classic', 'dark', 'gray', 'purple', 'blue', 'red'|'classic'|true|string |editRowData|empty object state of data to be edited||true|object |editSelectedId|string state of data to be edited||true|string |handleAddNew|function to run when add new is clicked||true|function |handleEdit|function to run when edit row is clicked||true|function |handleEditRowChange|function to run when row cell changed||true|function |handleEditRowSubmit|function to run when edit check is clicked||true|function |handleClose|function to run when edit cancel is clicked||true|function |handleRemove|function to run when remove row is clicked||true|function |handleRemoveAll|function to run when remove all is clicked||true|function |handleOpenModal|function to run when edit row is clicked (if editable prop is 'popup')||true|function

NPM

Superior React Table

Licence

MIT Licensed