Table

Import

import { Table } from "@dhua5922/react-native-kit";

Basic Example

Live Editor

function Example() {
  const style = { marginLeft: 4, marginRight: 4 };

  return (
    <Table striped border hover>
      <Table.tr>
        <Table.th>header 1</Table.th>
        <Table.th>header 2</Table.th>
      </Table.tr>

      <Table.tr striped>
        <Table.td>Cell 1</Table.td>
        <Table.td>Cell 2</Table.td>
      </Table.tr>

      <Table.tr>
        <Table.td>Cell 3</Table.td>
        <Table.td>Cell 4</Table.td>
      </Table.tr>
    </Table>
  );
}

Result

Loading...

Extended Rows Example

Live Editor

function Example() {
	const rows = [
		["Cell 1", "Cell 2"],
		["Cell 3", "Cell 4"],
	];

  const style = { marginLeft: 4, marginRight: 4 };

	const [expandedRows, setExpandedRows] = useState<number[]>([]);
	const [allExpanded, setAllExpanded] = useState(false);

	const toggleRowExpansion = (index: number) => {
		setExpandedRows((prevExpandedRows) =>
			prevExpandedRows.includes(index)
				? prevExpandedRows.filter((i) => i !== index)
				: [...prevExpandedRows, index]
		);
	};

	const toggleAllRows = () => {
		if (allExpanded) {
			setExpandedRows([]);
		} else {
			setExpandedRows(rows.map((_, index) => index));
		}
		setAllExpanded(!allExpanded);
	};

  return (
    <Table striped border hover>
			<Table.tr striped={false}>
				<Table.th>
					<View style={{ flexDirection: "row", alignItems: "center" }}>
						<Pressable
							style={{
								alignSelf: "center",
							}}
							onPress={toggleAllRows}
							aria-expanded={allExpanded}
						>
							<MaterialCommunityIcons
								name={allExpanded ? "chevron-double-down" : "chevron-double-up"}
								size={24}
								color="black"
							/>
						</Pressable>
						<View style={{ marginLeft: 8 }}>Header 1</View>
					</View>
				</Table.th>
				<Table.th>Header 2</Table.th>
			</Table.tr>

			{rows.map((row, rowIndex) => (
				<React.Fragment key={rowIndex}>
					<Table.tr striped={rowIndex % 2 === 0}>
						<Table.td >
							<View style={{ flexDirection: "row", alignItems: "center" }}>
								<Pressable
									style={{
										alignSelf: "center",
									}}
									onPress={() => toggleRowExpansion(rowIndex)}
									aria-expanded={expandedRows.includes(rowIndex)}
								>
									<MaterialCommunityIcons
										name={
											expandedRows.includes(rowIndex)
												? "chevron-down"
												: "chevron-up"
										}
										size={24}
										color="black"
									/>
								</Pressable>
								<View style={{ marginLeft: 8 }}>{row[0]}</View>
							</View>
						</Table.td>
						<Table.td>{row[1]}</Table.td>
					</Table.tr>

					{expandedRows.includes(rowIndex) && (
						<Table.tr striped={false}>
							<Table.td colSpan={2}>
								<View>Expanded content for row {rowIndex + 1}</View>
							</Table.td>
						</Table.tr>
					)}
				</React.Fragment>
			))}
		</Table>
  );
}

Result

Loading...

Props

note

Include all props from Div

Name	Type	Default	Description
striped	boolean	true	Enables zebra-striping to any table row within table body.
border	boolean	true	Adds borders on all sides of the tables and cells.
hover	boolean	true	Enable hovering on table rows within table body.