Skip to content

Support for <tfoot> in <HTMLTable> #4598

Closed
@saruman1234

Description

Environment

  • Package version(s): @blueprintjs/core@3.41.0

Feature request

Support using <tfoot> for table footer inside <HTMLTable> (along with bordered, striped, interactive variants) by adding the missing borders and/or background color.

  • There are currently styles for <thead>, but not <tfoot>.
  • This would be useful for aggregate/summary values like column totals.
  • Can be done as custom CSS, but feels like something that could be supported by the package.

Example of current appearance (missing both vertical and horizontal borders)

image

Example TSX

import React from "react";
import { HTMLTable } from "@blueprintjs/core";

const Example = () => {
  return (
    <HTMLTable bordered striped>
      <thead>
        <tr>
          <th>Item</th>
          <th>Color</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Laptop</td>
          <td>Silver</td>
          <td>$125</td>
        </tr>
        <tr>
          <td>Phone</td>
          <td>Black</td>
          <td>$225</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colSpan={2}></td>
          <td>$350</td>
        </tr>
      </tfoot>
    </HTMLTable>
  );
};

export default Example;

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Support for <tfoot> in <HTMLTable> · Issue #4598 · palantir/blueprint