Components Table

Default Table

Product name	Qty	Price
Product 0	0	0
Product 1	1	1
Product 2	2	4
Product 3	3	9
Product 4	4	16
Total	10	30

html

typescript

<table
  flowbiteTable
  [tableHead]="tableHeader"
  [tableBody]="tableBody"
  [tableFoot]="tableFooter"
  [data]="data">
  <ng-template #tableHeader>
    <tr flowbiteTableHead>
      <th
        scope="col"
        class="rounded-s-lg px-6 py-3">
        Product name
      </th>
      <th
        scope="col"
        class="px-6 py-3">
        Qty
      </th>
      <th
        scope="col"
        class="rounded-e-lg px-6 py-3">
        Price
      </th>
    </tr>
  </ng-template>
  <ng-template
    #tableBody
    let-data>
    <tr flowbiteTableBody>
      <td
        scope="row"
        class="px-6 py-4">
        {{ data.name }}
      </td>
      <td class="px-6 py-4">
        {{ data.qty }}
      </td>
      <td class="px-6 py-4">
        {{ data.price }}
      </td>
    </tr>
  </ng-template>
  <ng-template #tableFooter>
    <tr flowbiteTableFoot>
      <td
        scope="row"
        class="px-6 py-4">
        Total
      </td>
      <td class="px-6 py-4">10</td>
      <td class="px-6 py-4">30</td>
    </tr>
  </ng-template>
</table>

Themes

Table

{
  "host": {
    "base": "w-full text-left text-sm",
    "color": {
      "default": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      },
      "info": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      },
      "failure": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      },
      "success": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      },
      "warning": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      },
      "primary": {
        "light": "text-gray-500",
        "dark": "dark:text-gray-400"
      }
    }
  }
}

Table Head

{
  "host": {
    "base": "text-xs uppercase",
    "color": {
      "default": {
        "light": "bg-gray-50 text-gray-700",
        "dark": "dark:bg-gray-700 dark:text-gray-400"
      },
      "info": {
        "light": "bg-blue-50 text-blue-700",
        "dark": "dark:bg-blue-700 dark:text-blue-400"
      },
      "failure": {
        "light": "bg-red-50 text-red-700",
        "dark": "dark:bg-red-700 dark:text-red-300"
      },
      "success": {
        "light": "bg-green-50 text-green-700",
        "dark": "dark:bg-green-700 dark:text-green-400"
      },
      "warning": {
        "light": "bg-yellow-50 text-yellow-700",
        "dark": "dark:bg-yellow-700 dark:text-yellow-400"
      },
      "primary": {
        "light": "bg-primary-50 text-primary-700",
        "dark": "dark:bg-primary-700 dark:text-primary-300"
      }
    }
  }
}

Table Body

{
  "host": {
    "base": "border-b",
    "color": {
      "default": {
        "light": "border-gray-200 data-striped:odd:bg-white data-striped:even:bg-gray-50",
        "dark": "dark:border-gray-700 data-striped:odd:dark:bg-gray-900 data-striped:even:dark:bg-gray-800"
      },
      "info": {
        "light": "border-blue-200 data-striped:odd:bg-white data-striped:even:bg-blue-50",
        "dark": "dark:border-blue-900 data-striped:odd:dark:bg-blue-950 data-striped:even:dark:bg-blue-900"
      },
      "failure": {
        "light": "border-red-200 data-striped:odd:bg-white data-striped:even:bg-red-50",
        "dark": "dark:border-red-900 data-striped:odd:dark:bg-red-950 data-striped:even:dark:bg-red-900"
      },
      "success": {
        "light": "border-green-200 data-striped:odd:bg-white data-striped:even:bg-green-50",
        "dark": "dark:border-green-900 data-striped:odd:dark:bg-green-950 data-striped:even:dark:bg-green-900"
      },
      "warning": {
        "light": "border-yellow-200 data-striped:odd:bg-white data-striped:even:bg-yellow-50",
        "dark": "dark:border-yellow-900 data-striped:odd:dark:bg-yellow-950 data-striped:even:dark:bg-yellow-900"
      },
      "primary": {
        "light": "border-primary-200 data-striped:even:bg-primary-50 data-striped:odd:bg-white",
        "dark": "dark:border-primary-900 data-striped:odd:dark:bg-primary-950 data-striped:even:dark:bg-primary-900"
      }
    }
  }
}

Table Foot

{
  "host": {
    "base": "font-semibold",
    "color": {
      "default": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "info": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "failure": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "success": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "warning": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      },
      "primary": {
        "light": "text-gray-900",
        "dark": "dark:text-white"
      }
    }
  }
}