react-datatable-search-pagination v1.0.6

React Datatable Library with sort, search & pagination

Features

• Select amount of entries per page
• Search functionality with suggestions and highlighting of matches in table
• Sort table by original model property, with optional reverse order
• Mock data list to play around

Stack

• ReactJs ( >= 17.0.0 )
• Styled Components

Dependencies

Installation

npm i react-datatable-search-pagination

Customization

• ENTRIES OPTION: array of number

  • How many entries per page to display
  • if not defined will default to 15, 30, 50

• TABLEHEAD: array of strings - The properties of the objects from your data array you want to use in the datatable header - if not defined will default to mock objects properties: 'firstName', 'lastName', 'dob', 'startDate', 'street', 'city', 'state', 'zipcode', 'department'

• DATASRC: array of objects : The data to feed the datatable
  • if not defined will default to mockdata json to feed the datatable

  • if your data object model contains properties that are objects themselves, the default behavior is currently to use the first property of this object => example :

    my data object:
    {   
        address : 'abcd street 876',
        state: { name: 'xy', abbreviation: 'z' } ===> datatable will only display the state name
    } 

• More customization to come
  • Date formatting: currently defaults to 'MM/DD/YY'
  • Tests
  • Styling

USE

import { Datatable } from  'react-datatable-search-pagination' 

function App() {

// CUSTOM VALUES EXAMPLE
const mytableHead = [ 'name', 'show', 'motto', ]
const mydataSrc = [
    {
        name: 'peter griffin',
        show: 'family guy',
        motto: 'bird is the word'
    },
    {
        name: 'saul goodman',
        show: 'better call saul',
        motto: 'its all good, man'
    },
    {
        name: 'bojack horseman',
        show: 'bojack horseman',
        motto: 'help me, help you!'
    }
]
 

return (
    <div className="App">
        <Datatable
            tableHead={mytableHead}
            dataSrc={mydataSrc}
        />
    </div>
);
}
export default App;