...

...

...

import React, { useEffect, useState } from 'react'
import styled from '@emotion/styled'
import Grid, { GridType, IPropsColumn, RowType } from '@tenqube/react-grid'
import Pagination from './Pagination'

const PaginationComponent = () => {

  const pageData = [[[
        'data1', 'data1', 'data1', 'data1'
      ], [
        'data2', 'data2', 'data2', 'data2'
    ]], [[
        'data3', 'data3', 'data3', 'data3'
      ], [
        'data4', 'data4', 'data4', 'data4'
    ]], [[
        'data5', 'data5', 'data5', 'data5'
      ], [
        'data6', 'data6', 'data6', 'data6'
    ]]]
  const totalPage = pageData.length

  const [page, setPage] = useStatenumber(1)
  const [rows, setRows] = useState<Array<Array<RowType>>>(pageData[0])

  const columns: Array<IPropsColumn> = [{
    id: 'string1',
    name: 'Column1',
    type: GridType.String
  }, {
    id: 'string2',
    name: 'Column2',
    type: GridType.String
  }, {
    id: 'string3',
    name: 'Column3',
    type: GridType.String,
  }, {
    id: 'string4',
    name: 'Column4',
    type: GridType.String
  }]

  useEffect(() => {
    setRows(pageData[page - 1])
  }, [page])

  return (
    <>
      <$table>
        <Grid id={'pagination-example'} rows={rows} columns={columns} />
      </$table>
      <Pagination currentPage={page} totalPage={totalPage} updatePage={setPage} />
    </>
  )

}

export default PaginationComponent

const $table = styled.div`
  margin-bottom: 20px;
`

...

import React from 'react'
import styled from '@emotion/styled'
import Grid, { GridType, IPropsColumn, RowType } from '@tenqube/react-grid'
import ExclamationMarkIcon from './icons/ExclamationMarkIcon'

const EmptyComponent = () => {

  const columns: Array<IPropsColumn> = [{
    id: 'string1',
    name: 'Column1',
    type: GridType.String
  }, {
    id: 'string2',
    name: 'Column2',
    type: GridType.String
  }, {
    id: 'string3',
    name: 'Column3',
    type: GridType.String,
  }, {
    id: 'string4',
    name: 'Column4',
    type: GridType.String
  }]

  const rows: Array<Array<RowType>> = []

  return (
    <$arae>
      <Grid id={'empty-example'} rows={rows} columns={columns} />
      <$empty>
        <div>
          <ExclamationMarkIcon />
          <p>Data is empty</p>
        </div>
      <$empty>
    </$arae>
  )

}

export default EmptyComponent

const $arae = styled.div`
  position: relative;
  table tbody {
    height: 200px;
  }
`

const $empty = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  p {
    margin-top: 10px;
    color: #787d8f;
  }
`