ctstable

import React, { useEffect, useState } from "react";

import { MdNavigateNext } from "react-icons/md";

import CTS from "ctstable";

import axios from "axios";

import { FaBackward } from "react-icons/fa";

import { TbPlayerTrackNextFilled } from "react-icons/tb";

export default function PageMainTest() {

const [page_current, set_page_current] = useState(1);
const [page_per_row, set_page_per_row] = useState(10);
const [count, set_count] = useState(0);
const [is_loading, set_is_loading] = useState(true);
const [data, set_data] = useState([]);
const [search_data, set_search_data] = useState(null);
const [use_count_row, set_use_count_row] = useState({
title: "ល.រ​",
style: defualtColumHeader
});

var defualtColumHeader = {
textAlign: "center",
color: "black",
paddingTop: "10px",
paddingBottom: "10px"
};

var row_style = {
row_background: {
odd: "#dedede",
even: "#ffffff"
},
hover_background: "orange",
line_color: "#f1f1f1"
};

useEffect(() => {
set_is_loading(true);

axios.get(https:{ur-api}?show_per_page=${page_per_row}¤t_page=${page_current}${search_data}).then((res) => {
var list = res.data.data;
set_data(list);
set_is_loading(false);
if (
search_data == null ||
search_data == "" ||
search_data == undefined) {

} else {
set_count(res.data.data.length);
}

});

axios
.get(
https://{ur-api},
{
headers: {
Authorization: {token} },
}
)
.then((res) => {
if (
search_data == null ||
search_data == "" ||
search_data == undefined
) {
set_count(res.data.data.length);
} else {
}
});

}, [page_per_row, page_current, search_data]);

var column = [
{
title: "កូនសោរ",
style: defualtColumHeader,
selector: (row) =>

{
title: "ឈ្មោះ",
style: { color: "black", textAlign: "center" },
selector: (row) => (

{
title: "លេខទូរស័ព្ទ",
style: defualtColumHeader,
selector: (row) =>

];

var column_style = {
backgroundColor: "white",
color: "black",
};
var pagination = {
title_next: {
name: "Next",
style: null,
},
title_previous: {
name: "Prev",
style: null,
},

title_first: {
name: ,
style: null,
},

title_last: {
name: ,
style: null,
},
page_data: {
title_1: "Show page",
title_2: "of",
title_3: "result",
title_4: "",
page_current: page_current,
page_per_row: page_per_row,
count_list: count,
style: null,
},

};

function event_back() {
set_page_current(page_current <= 1 ? 1 : page_current - 1);
}

function event_next() {
set_page_current(
page_current <
Math.ceil(
pagination.page_data.count_list / pagination.page_data.page_per_row
)
? page_current + 1
: Math.ceil(
pagination.page_data.count_list / pagination.page_data.page_per_row
)
);
}

function event_search(e) {
if (e == null || e == "") {
set_page_current(1);
set_search_data(null);
} else {
set_page_current(1);
set_search_data(&search=${e}&search_by=search_name);
}
}

return (

);
}