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:

| Prop | Type | Required | Description | | :---: | :---: | :---: | :---: | | data | Array of Objects | Yes |An array of objects pertaining to the data you wish to be displayed in the table. | headers | Array of Strings | No | An array of strings to specify custom column headers for the table. (default column headers are the object keys in the data passed via the data prop). The number of headers in the array must match the number of key/value pairs in the data objects of the array passed to the data prop. | addClasses | Array of Strings | No | An array of strings to specify any classes to be added to the Table wrapper div. | options | Object | No | An object with two nested objects (specified by a header and body key) that specifies various styling options within your table.

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:

| Key | Type | Default Value | Description | | :---: | :---: | :---: | :---: | | initialSortBy | String | n/a | Pass the value of the column header to be sorted by initially. If the initialSortOrder prop is not specified, the designated column will be sorted in ascending order. | | initialSortOrder | String | asc | This must either be asc for ascending order or desc for descending order. | | sortable | Boolean | false | If sortable is true, the column headers will become sortable on click - clicking on a column header that is not sorted will sort it in ascending order. Clicking a column that is sorted in ascending order will resort the column in descending order. Clicking on a column that is sorted in descending order will resort the column in ascending order. | | capitalize | Boolean | false | If capitalize is true, each word of all headers in the table will be capitalized. | | styles | Object | { } | Use defined designators as keys to target header areas, and an object as the value with CSS styling key/value pairs. Valid header key designators are: row, col-all, col-even, col-odd, and col# (ie. - col4) |

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:

| Key | Type | Default Value | Description | | :---: | :---: | :---: | :---: | | zebra | Boolean | false | If zebra is set to true, the background color, set to #e7e7e7 by default but can be explicitly specified using the zebraColor body option, of even or odd rows' , specified by the zebraStart body option, are changed.| | zebraStart | String | odd | zebraStart specifies which rows the zebra background color will be applied to: even or odd. | | zebraColor | String | #e7e7e7 | zebraColor specifies the color that the zebra background. | | styles | Object | { } | Use defined designators as keys to target body areas, and an object as the value with CSS styling key/value pairs. Valid body key designators are: row-all, row-even, row-odd, row# (ie. - row4),col-even, col-odd, col# (ie. - col4), and cell# (ie. - cell4) |

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