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 ]} />

Note that the row, col, rowSpan, and colSpan follows the indexing so col=0, row=0 is the cell 1x1.

Version Notes (1.0.3 - 1.1.4)

• Node Modules path for TableFlex fixed.

More

For more you can visit my GitHub and my Next.js Components