react-flexy-table

most easy to use react table.

install

npm install react-flexy-table

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;

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

default filter inputs doesn't works case sensitive for do that add caseSensitive props like this.

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

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 change pagination text with this props

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

you can also use this callbacks for table actions

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

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="own-table"/>

props

GitHub