my-simple-react-table

KO | EN

gitlite — search

#python #hacktoberfest #ai #golang #machine-learning #deep-learning #linux #macos #java #cli #kubernetes #awesome-list #pytorch #ios

my-simple-react-table

(★ 10)

This is a simple light weight React package for creating table with pagination and search box in react application. The package allow ease of creating reactive table by taking advantage of react hooks with negligible impact on the overall performance of your application.

my-simple-react-table Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# My Simple React Table
This is a simple light weight React package for creating table with pagination and search box in react application. The package allow ease of creating reactive table by taking advantage of react hooks with negligible impact on the overall performance of your application.

[![NPM](https://img.shields.io/npm/v/my-simple-react-table.svg)](https://www.npmjs.com/package/my-simple-react-table)

## Install

```
$ npm install --save my-simple-react-table
```

## Package Usage

Minimum basic usage with column auto generation

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";

const Example = _ => {

return <SimpleTable
          data={[
                  {
                    "id": "1",
                    "name": "Tiger Nixon",
                    "position": "System Architect"
                  },
                  {
                    "id": "2",
                    "name": "Garrett Winters",
                    "position": "Accountant"
                  }
                ]}
        />
}

export default Example;
```

Usage with column specification and format example

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";

export default Example;
```
## Styling
The table generated use bootstrap styling by default. if you are not currently using bootstrap in your react application, kindly import css as follow
```js
import React from 'react';
import SimpleTable from "my-simple-react-table";
import "my-simple-react-table/dist/style.css";

```
or SCSS

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";
import "my-simple-react-table/dist/style.scss";

```

You can create your custom css using this as template https://github.com/successtar/my-simple-react-table/blob/master/src/style.css or scss with https://github.com/successtar/my-simple-react-table/blob/master/src/style.scss

## Props

- `data` - array of your json data objects, default is empty array
- `columns` - format and/or specify table columns, generated by default from data if not passed
- `searchBox` - show searchBox, default is true
- `rowPerPage` - specify maximum number of rows per page, default is 10

## Examples
https://successtar.github.io/my-simple-react-table

## License

my-simple-react-table

my-simple-react-table Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

my-simple-react-table

my-simple-react-table Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README