Table

General

Table
A table displays rows of data.

#	Title 1	Title 2	Title 3
1	Jason	Jason 2	Jason 3
2	Pray	Pray 2	Pray 3
3	Neme		Neme 2

Show Code

import React, { useRef, useState } from "react";
import {
  Table,
  TableHead,
  TableRow,
  TableBody,
  TableCell,
} from "pocko-ui/Table";
 
<Table tableClassName="table table-hover table-bordered table-striped align-middle">
  <TableHead>
    <TableRow>
      <TableCell>#</TableCell>
      <TableCell>Title 1</TableCell>
      <TableCell>Title 2</TableCell>
      <TableCell>Title 3</TableCell>
    </TableRow>
  </TableHead>
 
  <TableBody>
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>Jason</TableCell>
      <TableCell>Jason 2</TableCell>
      <TableCell>Jason 3</TableCell>
    </TableRow>
 
    <TableRow>
      <TableCell>2</TableCell>
      <TableCell>Pray</TableCell>
      <TableCell>Pray 2</TableCell>
      <TableCell>Pray 3</TableCell>
    </TableRow>
 
    <TableRow>
      <TableCell>3</TableCell>
      <TableCell colSpan="2">Neme</TableCell>
      <TableCell>Neme 2</TableCell>
    </TableRow>
  </TableBody>
</Table>

Cell Auto Width

The table displays data rows with adaptive width based on content

#	Title 1	Title 2	Title 3
1	Jason	Jason 2	Jason 3-Jason 3-Jason 3-Jason 3
2	Pray	Pray 2	Pray 3
3	Neme		Neme 2

Show Code

import React, { useRef, useState } from "react";
import {
  Table,
  TableHead,
  TableRow,
  TableBody,
  TableCell,
} from "pocko-ui/Table";
 
<Table cellAutoWidth tableClassName="table table-hover table-bordered table-striped align-middle">
  <TableHead>
    <TableRow>
      <TableCell>#</TableCell>
      <TableCell>Title 1</TableCell>
      <TableCell>Title 2</TableCell>
      <TableCell>Title 3</TableCell>
    </TableRow>
  </TableHead>
 
  <TableBody>
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>Jason</TableCell>
      <TableCell>Jason 2</TableCell>
      <TableCell>Jason 3</TableCell>
    </TableRow>
 
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>Jason</TableCell>
      <TableCell>Jason 2</TableCell>
      <TableCell>Jason 3-Jason 3-Jason 3-Jason 3</TableCell>
    </TableRow>
 
    <TableRow>
      <TableCell>3</TableCell>
      <TableCell colSpan="2">Neme</TableCell>
      <TableCell>Neme 2</TableCell>
    </TableRow>
  </TableBody>
</Table>

Sticky Table Headers

#	Title 1	Title 2	Title 3
1	Jason	Jason 2	Jason 3-Jason 3-Jason 3-Jason 3
2	Pray	Pray 2	Pray 3
3	Neme		Neme 2

Show Code [Index.scss]

 
.table_className {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
 
.to-table-responsive_iframe {
  overflow: auto;
  width: 100%;
  position: relative;
 
  &::-webkit-scrollbar {
    height: 15px;
    width: 10px;
    background-color: #e4e4e4;
  }
 
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
 
    &:hover {
      background-color: #aaa;
    }
  }
}

Show Code [Index.tsx]

import React, { useRef, useState } from "react";
import {
  Table,
  TableHead,
  TableRow,
  TableBody,
  TableCell,
} from "pocko-ui/Table";
import './Index.scss'
 
<div className="mt-4" style={{height: '100px', overflow: 'scroll'}}>  
  <Table cellAutoWidth tableClassName="table table-hover table-bordered table-striped align-middle">
    <TableHead>
      <TableRow>
        <TableCell>#</TableCell>
        <TableCell>Title 1</TableCell>
        <TableCell>Title 2</TableCell>
        <TableCell>Title 3</TableCell>
      </TableRow>
    </TableHead>
 
    <TableBody>
      <TableRow>
        <TableCell>1</TableCell>
        <TableCell>Jason</TableCell>
        <TableCell>Jason 2</TableCell>
        <TableCell>Jason 3</TableCell>
      </TableRow>
 
      <TableRow>
        <TableCell>1</TableCell>
        <TableCell>Jason</TableCell>
        <TableCell>Jason 2</TableCell>
        <TableCell>Jason 3-Jason 3-Jason 3-Jason 3</TableCell>
      </TableRow>
 
      <TableRow>
        <TableCell>3</TableCell>
        <TableCell colSpan="2">Neme</TableCell>
        <TableCell>Neme 2</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</div>

Row selection (multiple rows)

name	friend	condition
OIE19010	OIE19022	PERFECT
OIE19022	OIE19061	PERFECT
OIE19061	SWE19048	PERFECT
SWE19048	OIE19010	PERFECT

Show Code

import React, { useRef, useState } from "react";
import {
  Table,
  TableHead,
  TableRow,
  TableBody,
  TableCell,
} from "pocko-ui/Table";
 
import Checkbox from "pocko-ui/Checkbox"; //other components
 
const testData: any = [
  { id: "1", name: "OIE19010", friend: "OIE19022", condition: "PERFECT" },
  { id: "2", name: "OIE19022", friend: "OIE19061", condition: "PERFECT" },
  { id: "3", name: "OIE19061", friend: "SWE19048", condition: "PERFECT" },
  { id: "4", name: "SWE19048", friend: "OIE19010", condition: "PERFECT" },
];
 
const [tableData, setTableData] = useState<any[]>([]);
 
// 多选
function handleSelectAll() {
  const isAllSelected = testData.every((item) =>
    tableData.some((selectedItem: any) => selectedItem.id == item.id)
  );
 
  if (isAllSelected) {
    setTableData([]);
  } else {
    const unselectedItems = testData.filter(
      (item: any) => !tableData.some((selectedItem) => selectedItem.id == item.id)
    );
 
    setTableData((prevChoose: any) => [...prevChoose, ...unselectedItems]);
  }
}
 
// 单选
function isChoose(e: any, val: any) {
  const index = tableData.findIndex((item: any) => item.id == val.id);
 
  if (index != -1) {
    const updatedChoose = [...tableData];
    updatedChoose.splice(index, 1);
 
    setTableData(updatedChoose);
  } else {
    setTableData((prevChoose: any) => [...prevChoose, val]);
  }
}
 
return (
  <>
    <div className="mt-4 to-table-responsive_iframe">
      <Table tableClassName="table table-hover table-bordered table-striped align-middle">
        <TableHead className="sticky-top bg-white">
          <TableRow>
            <TableCell>
              <Checkbox
                wrapperClassName="mb-0"
                onChange={handleSelectAll}
                checked={tableData.length == testData.length}
              />
            </TableCell>
            <TableCell>name</TableCell>
            <TableCell>friend</TableCell>
            <TableCell>condition</TableCell>
          </TableRow>
        </TableHead>
 
        <TableBody>
          {testData.map((v: any, i: any) => {
            return (
              <TableRow key={i}>
                <TableCell>
                  <Checkbox
                    value={v}
                    wrapperClassName="mb-0"
                    onChange={(e: any, val: any) => {
                      isChoose(e, val);
                    }}
                    checked={tableData.some(
                      (selectedItem: any) => selectedItem.id == v.id
                    )}
                  />
                </TableCell>
                <TableCell>{v.name}</TableCell>
                <TableCell>{v.friend}</TableCell>
                <TableCell>{v.condition}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  </>
);

API

You could specify all remaining properties defined and all synthetic events from React on all components listed below. such as tabIndex, style, id, data-xxx, onClick, onMouseEnter, onMouseLeave, and so on.

<Table />
<TableHead />
<TableBody />
<TableRow />
<TableCell />

Table

import { Table } from 'pocko-ui/Table';

Property	Type	Default	Description	Required
`tableWrapperClassName`	string	-	The style name of the outer div of the table.	-
`tableClassName`	string	'table'	The style name of the table.	-
`cellAutoWidth`	boolean	-	Whether the table adjusts its width automatically.	-
`hover`	boolean	true	To enable a hover state on table rows.	-
`bordered`	boolean	true	Whether the table has borders.	-
`children`	React.ReactNode	-	The content inside the table.	✔

TableHead

import { TableHead } from 'pocko-ui/Table';

Property	Type	Default	Description	Required
`className`	string	-	The style name of the table head.	-
`ref`	React.ForwardedRef	-	It is the return element of this component.	-

TableBody

import { TableBody } from 'pocko-ui/Table';

Property	Type	Default	Description	Required
`className`	string	-	The style name of the table body.	-
`ref`	React.ForwardedRef	-	It is the return element of this component.	-

TableRow

import { TableRow } from 'pocko-ui/Table';

Property	Type	Default	Description	Required
`className`	string	-	The style name of the table body.	-
`ref`	string	-	It is the return element of this component.	-
`active`	boolean	-	Whether this cell row is highlight.	-
`activeName`	string	-	The style name of the table row highlight.	-

TableCell

import { TableCell } from 'pocko-ui/Table';

Property	Type	Default	Description	Required
`className`	string	-	The style name of the table body.	-
`active`	boolean	-	Whether this cell row is highlight.	-
`activeName`	string	-	The style name of the table row highlight.	-
`colSpan`	number	-	The value represents the number of columns to span.	-
`scope`	"col" \| "row" \| "colgroup" \| "rowgroup"	-	The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.	-
`onClick`	function	-	Click on the callback function of the cell.	-

Installation