`jsx
// Any renderable object can be passed
const emptyTable =

`js
/*
Use the following structure to overwrite the default behavior for columns
Undefined column keys will present the default behavior
text: Humanized text based on the column key name
invisible: Columns are visible by default
sortable: Columns are sortable by default
filterable: Columns are filterable by default
isImg: Will force the render as an image, e.g. for dynamic URLs
transform: Allows the custom rendering of the cells content
Should be a function and these are the arguments passed:
(value, index, row)
The index is the position of the row as being rendered and
not the index of the row in the original data
Nested structures can be defined by a string-dot representation
'key1.key2.key3.[...].key99'
*/
const headers = {
columnKey: {
text: 'Column 1',
invisible: false,
sortable: true,
filterable: true,
},
'nested.columnKey': {
text: 'Nested Column',
invisible: false,
sortable: (a, b) => b['nested.columnKey'] - a['nested.columnKey'],
filterable: true,
},
// If a dummy column is inserted into the data, it can be used to customize
// the table by allowing actions per row to be implemented, for example
tableActions: {
text: 'Actions',
invisible: false,
sortable: false,
filterable: false,
transform: (value, index, row) => {
// The following results should be identical
console.log(value, row.tableActions)
// Example of table actions: Delete row from data by row index
return deleteRow(row)}>Delete Row
},
},
}
`

$3

`js
const onRowClick = (event, { rowData, rowIndex, tableData }) => {
// The following results should be identical
console.log(rowData, tableData[rowIndex])
}
`

$3

The _CustomComponent_ passed down as a prop will be rendered with the following
props which can be used to perform all the necessary calculations and makes it
fully compatible with Semantic UI's [Pagination][pagination]
component.

`jsx
const CustomComponent = ({
activePage, totalPages, onPageChange,
}) => (/ ... /)

// ...
paginator={CustomComponent}
/>

// To change the page, call the onPageChange function with the next activePage

// ...
onClick={e => this.onPageChange(e, { activePage: nextActivePage })}
/>
`

$3

`js
// Default
const parseBool = {
yesWord: 'Yes',
noWord: 'No',
}
`

$3

`js
// You can pass a regular style object that will be passed down to
// Or a Class Name
const parseImg = {
style: {
border: '1px solid #ddd',
borderRadius: '4px',
padding: '5px',
width: '150px',
},
className: 'my-custom-image-style',
}
`

$3

If you want to control the order of the columns, simply pass an array containing
the keys in the desired order. All the omitted headers will be appended
afterwards unpredictably. Additionally, you can pass the _hideUnordered_ in
order to render only the headers in _orderedHeaders_ and hide the remaining.

`js
const hideUnordered = true

const orderedHeaders = [
'key1',
'key2.subkey3',
...
]
`

$3

You can control the _Toggles_ by passing an object with the following structure:

`ts
// Default toggles enabled
const withToggles = true

// Default toggles enabled with default select all
const withToggles = {
selectAll: true,
}

// Toggles with a custom locale
const withToggles = {
// The options to be passed as props to the SelectAll component
selectAll: {
// The text to be displayed in the Select All input
locale: {
// The default label for the unchecked state
selectAllWord: 'Select All',
// The default label for the checked state
unSelectAllWord: 'Unselect All',
},
// You should not need to use this, but it is here for completeness
handleToggleAll: (isChecked: boolean): void => {
// ...
},
},
}
`

Examples

$3

By passing a string to the data prop, the component will interpret it as an
URL and try to load the data from that location using _[fetch][fetch]_. If a
successful request is returned, the data will be extracted from the response
object. By default, it will grab the data key from the response. If it's in a
different key, you can specify it with the dataKey prop. Just in case it's
not a first-level attribute, you can supply a custom function to locate the
data using the dataKeyResolver prop.

response from /api/v1/user

`json
{
"status": "success",
"message": "",
"users": [{ "id": 0, "other": "..." }, { "id": 1, "other": "..." }, "..."]
}
`

response from /api/v1/post

`json
{
"status": "success",
"message": "",
"results": {
"posts": [{ "id": 0, "other": "..." }, { "id": 1, "other": "..." }, "..."]
}
}
`

component

`jsx
// Using dataKey
data="/api/v1/user"
dataKey="users"
name="test-table"
/>

// Using dataKeyResolver
data="/api/v1/post"
dataKeyResolver={(response) => response.results.posts}
name="test-table"
/>
`

$3

`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import faker from 'faker'
import SmartDataTable from 'react-smart-data-table'

const testData = []
const numResults = 100

for (let i = 0; i < numResults; i++) {
testData.push({
_id: i,
fullName: faker.name.findName(),
'email.address': faker.internet.email(),
phone_number: faker.phone.phoneNumber(),
address: {
city: faker.address.city(),
state: faker.address.state(),
country: faker.address.country(),
},
})
}

ReactDOM.render(
data={testData}
name="test-table"
className="ui compact selectable table"
sortable
/>,
document.getElementById('app'),
)
`

Demos

You can try _react-smart-data-table_ with different UI libraries in the demo
pages below. You can experiment with different features as well.

- [Semantic UI: All Features][semantic]

Take a look at the full featured example's [source code][example-source].

Also, see it in full integration with a simple user/group management dashboard
application. Feel free to play around with it, it's built with hot reloading.

- [Somewhere I Belong][somewhere-i-belong]

If you want to play around, check out this [codepen][codepen].

FAQ

If you're having trouble with _react-smart-data-table_, please check out the
answers below. Otherwise, feel free to open a new issue!

- Check [this answer][hide-pagination] to see how to hide the pagination for an
empty table
- Check [this answer][ssr-integration] if you're integrating with Server Side
Rendering (SSR)
- Check [this answer][double-click] if you want to implement a double click
event on a row
- Check [this answer][control-page] if you want to control the active page
manually (e.g., based on a URL parameter)
- Check [this answer][column-selector] if you want to style individual columns
differently

Forking / Contributing

If you want to fork or [contribute][contribute], it's easy to test your changes.
Just run the following development commands. The _start_ instruction will start
a development HTTP server in your computer accessible from your browser at the
address http://localhost:3000/.

`sh
yarn start
``

[codepen]: https://codepen.io/joaocarmo/pen/oNBNZBO
[column-selector]: https://github.com/joaocarmo/react-smart-data-table/issues/62#issuecomment-1002973644
[contribute]: ./CONTRIBUTING.md
[contributor]: ./CODE_OF_CONDUCT.md
[control-page]: https://github.com/joaocarmo/react-smart-data-table/issues/60#issuecomment-974718595
[double-click]: https://github.com/joaocarmo/react-smart-data-table/issues/59#issuecomment-969371513
[example-source]: ./example/index.js
[fetch]: https://fetch.spec.whatwg.org/
[hide-pagination]: https://github.com/joaocarmo/react-smart-data-table/issues/42#issuecomment-828593880
[jest]: https://github.com/facebook/jest
[lgtm-alerts]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/alerts/
[lgtm-context]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/context:javascript
[npm]: https://badge.fury.io/js/react-smart-data-table
[pagination]: https://react.semantic-ui.com/addons/pagination/
[react-very-simple-data-table]: https://github.com/joaocarmo/react-very-simple-data-table
[semantic]: http://joaocarmo.com/react-smart-data-table/
[somewhere-i-belong]: https://github.com/joaocarmo/somewhere-i-belong
[ssr-integration]: https://github.com/joaocarmo/react-smart-data-table/issues/50#issuecomment-963060887