react-flexy-table

most easy to use react table

install

npm install react-flexy-table

live demo

https://react-flexy-table.netlify.app/

usage

its realy simple just import and pass to data! React flexy table will care after that

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  return <ReactFlexyTable data={data} />
}

export default App

| :memo: | if your data includes key with '_' like 'user_id' in header of table. It will be transform to 'User Id' | | ------ | :------------------------------------------------------------------------------------------------------- |

thats is !

if you want to make sortable add sortable prop

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  return <ReactFlexyTable data={data} sortable />
}

export default App

if you want to add some additional columns you can use additionalCols props like that

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'
import deleteIcon from './icons/delete-button-svgrepo-com.svg'
import editIcon from './icons/edit-svgrepo-com.svg'

const App = () => {
  const additionalCols = [
    {
      header: 'Actions',
      td: (data) => {
        return (
          <div>
            <img
              src={deleteIcon}
              width='30'
              height='20'
              onClick={() => alert('this is delete for id ' + data.id)}
            />{' '}
            // delete icon
            <img
              src={editIcon}
              width='30'
              height='20'
              onClick={() => alert('this is edit for id ' + data.id)}
            /> // edit icon
          </div>
        )
      }
    }
  ]
  return <ReactFlexyTable data={data} additionalCols={additionalCols} />
}

you can also define your columns so you can change the table values anything you like. (Note if you define columns your additionalcol value will not work)

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  columns = [
    {
      header: 'id value',
      key: 'id',
      td: (data) => <div>the id is {data.id}</div>
    },
    {
      header: 'username',
      key: 'name'
    },
    {
      header: 'city',
      // can also use with nested objects
      key: 'address.city'
    }
  ]
  return <ReactFlexyTable data={data} columns={columns} />
}

export default App

if you want to limit sortable columns you can pass thats columns with nonSortCols props

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  return (
    <ReactFlexyTable data={data} sortable nonSortCols={['name', 'surname']} />
  )
}

export default App

if you want to make your table filterable just add filterable props

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  return <ReactFlexyTable data={data} filterable />
}

export default App

You can also add custom filter component. To do that add customFilters props like below. Column key represent key value in columns prop and return a callback function. If key exists table uses callback function instead of default filter.

<ReactFlexyTable  customFilters={{ id: () => <button>id</button>, name:()=><input name="name" /> }}   ...props />

<ReactFlexyTable  customFilters={{ column_key: () => <button>Check All</button> }}   ...props />

if you want to limit filterable columns you can pass thats columns with nonFilterCols props

import ReactFlexyTable from "react-flexy-table"
import "react-flexy-table/dist/index.css"

const App = ()=>{

return <ReactFlexyTable data={data} filterable nonFilterCols={["gender","email"]]/>
}
export default App;

You can also add global search input for search in all data.

import ReactFlexyTable from 'react-flexy-table'
import 'react-flexy-table/dist/index.css'

const App = () => {
  return <ReactFlexyTable data={data} filterable globalSearch />
}
export default App

default filter inputs doesn't works case sensitive for do that add caseSensitive props like this.(Also work with global search)

return <ReactFlexyTable data={data} filterable caseSensitive />

you can change pagination text with this props

  previousText: String,
  nextText: String,
  rowsText: String,
  pageText: String,
  ofText: String,
  totalDataText: String,
  filteredDataText: String,
   downloadExcelText: String,

you can also use this callbacks for table actions

   onPageChange: Function,
  onSortedChange: Function,
  onPageSizeChange: Function,

download data in excel

you can download your data in excel file. For do that use showExcelButton

return <ReactFlexyTable data={data} filterable caseSensitive showExcelButton />

you can pass a downloadExcelProps object to change download excel properties

downloadExcelProps is an object includes 3 prop

{ type: // default is "all" it could be "filtered","all","paged" if you pass "all" will download all data if you pass "filtered" will download all filtered data, if you pass "paged" will download the current page

title: // name of the excel file default is "table"

showLabel: // takes a bool value default is "true". Determines the appearance of column names in the file

}

const downloadExcelProps = {
  type: 'filtered',
  title: 'test',
  showLabel: true
}
return (
  <ReactFlexyTable
    data={data}
    filterable
    caseSensitive
    showExcelButton
    downloadExcelProps={downloadExcelProps}
  />
)

styling

you can simply change the colors just change this css variables

:root {
  --rft-main-color: #00b879;
  --rft-button-color: #00b879;
  --rft-even-row-color: #f3f3f3;
}

you can also override the rft-table class or you can pass your own table class like

return <ReactFlexyTable data={data} className='my-table' />

and you can change the styling

.my-table tr {
  color: red;
  font-weight: bold;
}

you can also change the global search input style with override this classes

rtf-gs-input
rft-gs-td
rft-gs-tr
rft-excel-button
rft-pagination-button

props

| property | type | default | description | | :----------------: | :------: | -------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------: | | data | array | [ ] | data for table | | columns | array | null | columns for table | | additionalCols | Array | [ ] | additional cols for table | | pageSize | Number | 5 | page size of the table | | sortable | Boolean | false | allows to sort data from header | | filterable | Boolean | false | open filter inputs for table | | customFilters | Object | {} | change filter component with custom filter table | | GlobalSearch | Boolean | false | shows the global search input | | nonFilterCols | array | [ ] | if filterable open but you dont want to filter some cols you can use this. array includes column names that you dont want to filter. | | nonSortCols | array | [ ] | if you dont want to sort some cols you can use this. array includes column name that you dont want to sort. | | pageSizeOptions | array | [5,10,15,20] | represent page size select options | | onPageChange | function | | callback for page change | | onSortedChange | function | | callback for sorted change | | onPageSizeChange | funtion | | callback for page size change | | previousText | String | "Previous" | text for previos button | | ofText | String | "of" | text for of | | searchText | String | "Search" | text for global search | | totalDataText | String | "Total data count" | text for total data | | filteredDataText | String | "Filtered data count" | text for filtered data | | downloadExcelText | String | "Download Excel" | text for download excel button | | showExcelButton | Boolean | false | shows the download excel button | | downloadExcelProps | Object | {type:'all', title:'table', showLabel:true } | properties for excel download | | caseSensitive | Boolean | false | controls search input case sensitive | | className | String | "" | className for table |