magic-react-table v1.0.1

This project was bootstrapped with Create React App.

Magic React Table v1.0

Magic React Table is a React Table component that makes tables easy - style it, sort it, search it, and more!

Installing Magic React Table

To install Magic React Table, just use npm install magic-react-table --save in the root of your project.

To use it in your React project, import the Table component into a functional or class React component like so:

import Table from 'magic-react-table'

Using The Table Component

To instantiate a Magic React Table Component, call the Table component like any other React component, including any of the props available (see the Magic React Table Props section below for more on the props available):

<Talbe data={staffData} />

Magic React Table Props

When using the Table component, there are a few props that can be used:

All examples in this documentation will use the following staffData array for the data prop:

let staffData = [
    {
        "name": "Kathy",
        "title": "Technician, Int",
        "service date": 2005,
        "salary": "$67,000",
        "phone": "888-555-1297"
    },
    {
        "name": "Robert",
        "title": "Supervisor",
        "service date": 2018,
        "salary": "$78,000",
        "phone": "888-555-9913"
    },
    {
        "name": "William",
        "title": "Technician, Jr",
        "service date": 2007,
        "salary": "$55,000",
        "phone": "888-555-5612"
    },
    {
        "name": "Samantha",
        "title": "Accountant",
        "service date": 2011,
        "salary": "$61,000",
        "phone": "888-555-5612"
    }
];

Using The Props

data

The data prop is required for the Table component which must be passed an array of objects, like the staffData array of objects above. Because the keys in the first object are used as the default headers for the table, the key/value pairs must have the same type of data in the same place in each object. As you can see in the staffData array, each object has a 'name' key as key one, 'title' as key two, 'service date' key as key three, and so on...

Example of a basic Table component:

<Table data={staffData} /> *Some styling applied to headers for readability

headers

To forgo using the default headers, specified by the keys of the objects provided to the data prop, pass an array (of strings) of new headers to the headers prop. This will replace each respective column header based on its position in the array, like so:

let newHeaders = ['column1', 'column2', 'column3', 'column4', 'column5']

In the example array newHeaders, the string column1 would replace the header in the first column of the table, the string column2 would replace the header in the second column of the table, and so on... Please be aware that if the length of the array passed to the header prop does not equal the number of keys in each object within the array passed to the data prop, the header prop will be ignored and the default headers will be used.

Example of Table component with headers:

const customHeaders = ['Column1', 'Column2', 'Column3', 'Column4', 'Column5'];

<Table data={staffData} headers={customHeaders} />

*Some styling applied to headers for readability

addClasses

The addClasses prop allows you to add classes to the table's container div by passing in an array of strings that will be added as class names.

Example of Table component with addClasses:

const tableClasses = ['table1', 'staff_table'];

<Table data={staffData} addClasses={tableClasses} /> 

*Some styling applied to headers for readability

options

The options prop allows you to add various pre-defined styling options (discussed in detail below) or append various standard CSS styling to rows, columns, or cells as specified in the options object.

The two keys in the options variable passed to the porp must be header and body, and must both be objects themselves:

const baseOptions = {
    header: {},
    body: {},
};

As implied, the header object specifies options to be applied to the header of the table, while the body object specifies options to be applied to the body. Below we will take a look at each respective child object (header and body); their built-in options, as well as how to apply styling to the table through them.

####header object: The header object has a few built-in options that allow the control of some styling functionality within the header of the table, as well as a styles object that takes a targeted approach to applying CSS styling:

Example of using header option:

const tableOptions = {
    header: {
        sortable: true,
        initialSortBy: 'name',
        initialSortOrder: 'desc',
        capitalize: true,
        styles: {
            row: {
                border: '5px solid #0dddc2',
            },
            'col-all': {
                fontWeight: 'bold',
                border: '2px dashed #000',
            },
            'col-odd': {
                backgroundColor: '#5c56ff',
                color: '#fff',
                paddingLeft: '10px',
            },
            'col-even': {
                backgroundColor: '#fc9494',
                textAlign: 'center',
            },
            col2: {
                color: '#00ff00',
            },
        },
    },
    body: {},
};

<Table data={staffData} options={tableOptions} />

####body object: The body object has a few built-in options that allow the control of some styling functionality within the body of the table, as well as a styles object that takes a targeted approach to applying CSS styling:

Example of using body option:

const tableOptions = {
    header: {
        styles: {
            'col-all': {
                fontWeight: 'bold',
            },
        },
    },
    body: {
        zebra: true,
        zebraStart: 'odd',
        zebraColor: '#2b87ff',
        styles: {
            'row-all': {
                borderTop: '2px solid #b703c4',
                borderBottom: '2px solid #b703c4',
            },
            'row-even': {
                color: '#ff0000',
            },
            'row-odd': {
                color: '#00ff00',
            },
            'col-all': {
                padding: '10px 0px',
            },
            'col-even': {
                textDecoration: 'overline',
            },
            'col-odd': {
                textDecoration: 'underline',
            },
            col4: {
                border: '2px dashed #363636',
            },
            cell6: {
                backgroundColor: 'orange',
            },
        },
    },
};

<Table data={staffData} options={tableOptions} />

*Some styling applied to headers for readability