A multilanguage, editable, addable, removable, sortable, detailed searchable, responsive table component for react.
npm install superior-react-tablehttps://halidunal.github.io > Portfolio > Superior React Table
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": "john@john.mail",
"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": "antonio@antonio.mail",
"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": "thomas@thomas.mail",
"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": "christina@christina.mail",
"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": "martin@marting.mail",
"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": "francisco@francisco.mail",
"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": "ming@ming.mail",
"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": "elizabeth@elizabeth.mail",
"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": "sven@sven.mail",
"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": "roland@roland.mail",
"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": "peter@peter.mail",
"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": "john@john.mail",
"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>
)
}| 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 |
MIT Licensed