eprofit

component library

DataTable component with bare minimum

No style libraries no dependencies

Live Example

only 1.5kB

Property	Type	Required
data	array of objects	yes
columns	array of objects	yes
mainColor	string	no
uniqueKey	string	no
toChange	callback	no

Property structure:

const data = [
  {
    id: 1,
    first_name: "Benedikta",
    last_name: "Lambard",
    email: "blambard0@epa.gov"
  },
  {
    id: 2,
    first_name: "Goldarina",
    last_name: "Aspell",
    email: "gaspell1@telegraph.co.uk"
  },
  ....
];

const columns = [
  {
    selector: "first_name",
    displayName: "First name"
  },
  {
    selector: "last_name",
    displayName: "Last name"
  },
  {
    selector: "email",
    displayName: "Email"
  }
];

<DataTable data={data} columns={columns} />

Feautures:

• pagination
• count results
• choose records per page
• page indicator
• reset data
• two directions order when you click on column title
• click to column title and search into column
• click to cell and edit
• while edit a cell, press enter to save your editable value
• while edit a cell, make a outer of cell click to discard the changes

Editable cells:

• If you want a simple data table render avoid toChange prop
• If you need the editable cells put inside toChange prop a callback and all will runs automatically

The toChange callback function return 4 parameters

• newValue: the new updated value
• fullRecord: full object of updated record
• property: name of updated object property
• index: in which index into array data the changes applied

Note: The data updated automatically, you have to use toChange callback to grab the data and use it for http update request

Note No 2: If your object has unique property not named id you can use uniqueKey prop to override the default.