Invoice Table

UI Component

A fully customizable invoice table with editable footer and real-time calculations.

Advanced Invoice Table

DescriptionQuantityPriceTotalActions
Product A100
Product B100
Advance Payment:
Grand Total: 200
Remaining Amount: 150

Footer Details (State):

{
  "advancePayment": 50,
  "grandTotal": 200,
  "remainingAmount": 150
}

Installation

1

Create the following file in your project:

components/InvoiceTable/InvoiceTable.tsx
2

Copy and paste the following code:

Loading...
...

Usage Examples

Basic Invoice Table

Basic Invoice Table

DescriptionQuantityPriceTotalActions
Product A100
Product B300
Advance Payment:
Grand Total: 1900
Remaining Amount: 1700

Advanced Invoice Table

Advanced Invoice Table

DescriptionQuantityPriceTotalActions
Product A100
Product B100
Advance Payment:
Grand Total: 200
Remaining Amount: 150

Footer Details (State):

{
  "advancePayment": 50,
  "grandTotal": 200,
  "remainingAmount": 150
}