1.2.9 • Published 2 years ago

react-table-with-pagination v1.2.9

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

How to use

import DataTable from 'react-table-with-pagination'

How to Declare

<DataTable 
	tableClassName = "table tablesort table-responsive tablesearch-table table-bordered table-hover text-center"
	theadData={header} 
	tbodyData={data}
	rowsPerPage = {rowPaginationCount}
	parameter={showData} 
	customClassName={customClassName}
	textStyle={textStyle}
	searchData = {search}
	actionColumn = {actionColumn}
	pagination = "true"
/>

Sample Input Data

  const [rowPaginationCount,setRowPaginationCount] = useState(5)

  const [search,setSearch] = useState('')

  const data = [
    {
      color: "red",
      value: "#f00"
    },
    {
      color: "green",
      value: "#0f0"
    },
    {
      color: "blue",
      value: "#00f"
    },
    {
      color: "cyan",
      value: "#0ff"
    },
    {
      color: "magenta",
      value: "#f0f"
    },
    {
      color: "yellow",
      value: "#ff0"
    },
    {
      color: "black",
      value: "#000"
    },
    {
      color: "green",
      value: "#0f0"
    },
    {
      color: "blue",
      value: "#00f"
    },
    {
      color: "cyan",
      value: "#0ff"
    },
    {
      color: "magenta",
      value: "#f0f"
    },
    {
      color: "yellow",
      value: "#ff0"
    },
    {
      color: "black",
      value: "#000"
    }
  ]

  const header = [
    'color',
    'value',
    'Action'
  ]

  const showData = [
      'color',
      'value'
  ]

  function customClassName(getData){
    if(getData.color === "red"){
      return "danger"
    }
  }

  const textStyle = {
      'color' : { textAlign : 'right', fontWeight:'700' },
  }

const actionColumn = (getData) => {
	return( 
	  <div>
	    <a onClick={(e)=>editData(getData)}>Edit</a>
	    <a onClick={(e)=>deleteData(getData)}>Delete</a>
	  </div>
	)
}

function editData(getData) {
console.log(getData)
}

function deleteData(getData) {
console.log(getData)
}
1.2.9

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.1.0

2 years ago