README

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

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
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

Usage no npm install needed!