eprofit v0.1.27

component library

DataTable component with bare minimum

No style libraries no dependencies

Live Example

only 1.5kB

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.