Tableflex NPM | npm.io

TableFlex

TableFlex is a flexible and customizable table component for Next.js, built with TypeScript. You can easily create dynamic and responsive tables tailored to your specific needs.

Installing

npm i tableflex

Documentation

Add the component into your code adding three required props.

x // to set the table columns
y // to set the table rows
content // to set the content of your table

<TableFlex x={3} y={3} content={tableContent} />

Table Content

You have to declare the tableContent as follows:

const tableContent = [ ["1.1", "1.2", "1.3"], ["2.1", "2.2", "2.3",], ["3.1", "3.2", "3.3",], // For more rows continue with "4.1", "4.2" etc. // For more cols contunue with "1.4", "2.4" etc. ];

Other Props

width // to set the table width (string -> ex. width="50%")
height // to set the table height (string -> ex. height="45px")
padding // to set the cell padding (string -> ex. padding="15px")
align // to set the cell align (only left, right, center or justify -> ex. align="center")
border // to set the table and cell border width (string -> ex. border="5px")
borderStyle // to set the table and cell border style (string -> ex. borderStyle="solid")
borderColor // to set the table and cell border color (string -> ex. borderColor="#c4c4c4")
hover // to enable the cell hover (boolean -> ex. hover={true})
hoverColor // to set hover color (string -> ex. hoverColor="#c4c4c4")

Example Usage

<TableFlex x={3} y={3} content={tableContent} width="50%" height="45px" padding="12px" align="center" border="5px" borderStyle="solid" borderColor="#c4c4c4" hover={true} hoverColor="#c4c4c4" />

Merging Cells

In order to merge cells follow the instructions:

<TableFlex x={3} y={3} content={tableContent} mergedCells={[ { row: 0, col: 0, rowSpan: 0, colSpan: 0 }, // if you want to merge more than one cell and a line ]} />