html-table-to-dataframe

Convert an HTML Table to a DataFrame

Overview

This project provides utilities to convert HTML tables into structured data formats and pretty-print them as tables. It uses jsdom for parsing HTML and cli-table3 for displaying data in a formatted table.

Usage:

Person	Like	Age
Chris	HTML tables	22
Dennis	Web accessibility	45
Sarah	JavaScript frameworks	29
Karen	Web performance	36

1import { toDataFrame } from 'html-table-to-dataframe';
2
3const dataFrame = toDataFrame(htmlString, ['Person', 'Likes', 'Age']);
4
5console.log(dataFrame)
6// data => [
7//  { Person: "Chris", Likes: "HTML tables", Age: "22" },
8//];
9
10await toPrettyPrint(data);
11

In Print Form

1┌─────────┬──────────────────────┬─────┐
2│ Person  │ Likes                │ Age │
3├─────────┼──────────────────────┼─────┤
4│ Chris   │ HTML tables          │ 22  │
5│ Dennis  │ Web accessibility    │ 45  │
6│ Sarah   │ JavaScript frameworks│ 29  │
7│ Karen   │ Web performance      │ 36  │
8└─────────┴──────────────────────┴─────┘

Accessible Expectations

• toHaveTableRowCountGreaterThan
• toHaveColumnToBeValue
• toHaveColumnValuesToMatchRegex
• toHaveColumnsValuesToMatchRegex
• toHaveColumnValuesToBeInRange
• toHaveColumnValuesToBeNumbers
• toHaveColumnToMatchWhenFilteredBy
• toHaveColumnToMatchGroupWhenFilteredBy
• toHaveColumnToNotMatch
• toHaveTableRowCount
• toHaveColumnGroupToBeValue
• toHaveColumnGroupToBeValues
• toHaveTableToNotMatch
• toHaveTableToMatch

toDataFrame

The toDataFrame function converts an HTML string into a data frame structure, which is an array of objects where each object represents a row in the table. This function is essential for transforming raw HTML tables into a format that can be easily manipulated and tested.

toHaveColumnToBeValue

Checks if a single row in the table has the specified value in a given column.

toHaveColumnToBeValue(tableData, 'col_2', '3');

1const tableData = [
2  { col_1: '1', col_2: '3' }
3];
4
5toHaveColumnToBeValue(tableData, 'col_2', '3'); // Passes, as the value in 'col_2' is '3'

toHaveTableRowCountGreaterThan

Checks if the table contains more rows than the specified count.

toHaveTableRowCountGreaterThan(tableData, 3);

1const tableData = [
2  { one: '1', two: '3' },
3  { one: '2', two: '100' }
4];
5
6toHaveTableRowCountGreaterThan(tableData, 3); // Fails, as row count is 2

toHaveColumnValuesToMatchRegex & toHaveColumnsValuesToMatchRegex

Checks if the values in the specified column match the given regular expression pattern.

toHaveColumnValuesToMatchRegex(tableData, "two", "\d\d");

1const tableData = [
2  { one: '1', two: '3' },
3  { one: '2', two: '100' }
4];
5
6toHaveColumnValuesToMatchRegex(tableData, "two", "\\d\\d"); // Fails, as {"two":"100"} has 3 digits
7toHaveColumnsValuesToMatchRegex(tableData, ["one", "two"], "\\d\\d"); // Fails, as {"two":"100"} has 3 digits

toHaveColumnValuesToBeInRange

Checks if the values in the specified column fall within the given range.

toHaveColumnValuesToBeInRange(tableData, "two", 0, 4);

1const tableData = [
2  { one: '1', two: '3' },
3  { one: '2', two: '100' }
4];
5
6toHaveColumnValuesToBeInRange(tableData, "two", 0, 4); // Fails, as {"two":"100"} is greater than 4

toHaveColumnValuesToBeNumbers

Checks if the values in the specified column are numbers.

toHaveColumnValuesToBeNumbers(tableData, "two");

1const tableData = [
2  { one: '1', two: '3' },
3  { one: '2', two: '1e' }
4];
5
6toHaveColumnValuesToBeNumbers(tableData, "two"); // Fails, as {"two":"1e"} is not a number

toHaveColumnToMatchWhenFilteredBy

Checks if a target column/value pair exists when filtered by a specified column/value.

toHaveColumnToMatchWhenFilteredBy(tableData, "col_1", "2", "col_2", "xyz");

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '1e' }
4];
5
6toHaveColumnToMatchWhenFilteredBy(tableData, "col_1", "2", "col_2", "xyz"); 
7// Fails, as {"col_1":"2"} is found, but {"col_2":"xyz"} is not

toHaveColumnToMatchGroupWhenFilteredBy

Uses an array of GroupType to check if a target column/value pair exists when filtered by each specified column/value.

toHaveColumnToMatchGroupWhenFilteredBy(tableData, "col_1", "1", group);

1type GroupType = {
2  filterColumn: string;
3  filterValue: string;
4};
5
6const tableData = [
7  { col_1: '1', col_2: 'a', col_3: 'b' }
8];
9
10const group: GroupType[] = [
11  { filterColumn: "col_2", filterValue: "a" },
12  { filterColumn: "col_3", filterValue: "a" }
13];
14
15toHaveColumnToMatchGroupWhenFilteredBy(tableData, "col_1", "1", group);
16// Fails, as {"col_2": "a"} is OK; however, {"col_3": "a"} should be "b"

toHaveColumnToNotMatch

Confirms that a specified column no longer contains a certain value. This is useful for checking if a row has been deleted or archived.

toHaveColumnToNotMatch(tableData, "col_1", "2");

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '1e' }
4];
5
6toHaveColumnToNotMatch(tableData, "col_1", "2");
7// Fails, as {"col_1":"2"} is found and should not be.

toHaveTableRowCount

Matches the row count of the table data against the expected value.

toHaveTableRowCount(tableData, 3);

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '1e' }
4];
5
6toHaveTableRowCount(tableData, 3);
7// Fails, as row count should be 2.

toHaveColumnToBeValue

Expects only 1 table row and checks if the column value matches the provided value.

toHaveColumnToBeValue(tableData, "col_2", "3");

1const tableData = [
2  { col_1: '1', col_2: '3' }
3];
4
5toHaveColumnToBeValue(tableData, "col_2", "3");
6// Passes, as the column value is "3".

toHaveColumnGroupToBeValue

Expects only 1 table row and checks if the column values in a group match the provided values. Exceptions are made when the filter value is null or undefined.

toHaveColumnGroupToBeValue(tableData, [{ filterColumn: "col_2", filterValue: "3" }]);

1const tableData = [
2  { col_1: '1', col_2: '3' }
3];
4
5const filterGroup = [
6  { filterColumn: "col_2", filterValue: "3" }
7];
8
9toHaveColumnGroupToBeValue(tableData, filterGroup);
10// Passes, as the column value for "col_2" is "3".

toHaveColumnGroupToBeValues

Performs multiple grouped checks using toHaveColumnGroupToBeValue for each row. The tableData must be the same length as the filterGroups, and each entry in filterGroups is applied to the corresponding row in tableData.

toHaveColumnGroupToBeValues(tableData, filterGroups);

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '4' }
4];
5
6const filterGroups = [
7  [{ filterColumn: "col_2", filterValue: "3" }],
8  [{ filterColumn: "col_2", filterValue: "4" }]
9];
10toHaveColumnGroupToBeValues(tableData, filterGroups);
11// Passes, as the column values match the expected values for each row.

toHaveTableToNotMatch

Converts two tables into strings and compares them for equality. This assertion checks that the two tables do not match exactly.

toHaveTableToNotMatch(tableData1, tableData2);

1const tableData1 = [
2  { col_1: '1', col_2: '3' }
3];
4
5const tableData2 = [
6  { col_1: '1', col_2: '3' }
7];
8
9toHaveTableToNotMatch(tableData1, tableData2);
10// Fails, as the two tables are identical

toHaveTableToMatch

Converts two tables into strings and compares them for equality. This assertion checks that the two tables match exactly.

toHaveTableToMatch(tableData1, tableData2);

1const tableData1 = [
2  { col_1: '1', col_2: '3' }
3];
4
5const tableData2 = [
6  { col_1: '1', col_2: '4' }
7];
8toHaveTableToMatch(tableData1, tableData2);
9// Fails, as the two tables are different

toHaveTableRowCountEqualTo

Check the length of the table is equal to

toHaveTableRowCountEqualTo(tableData, expectedLength);

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '4' }
4];
5
6toHaveTableRowCountEqualTo(tableData, 3);
7// Fails, as the tables are length of 2

toHaveTableRowCountLessThan

Check the length of the table is equal to

toHaveTableRowCountLessThan(tableData, expectedLength);

1const tableData = [
2  { col_1: '1', col_2: '3' },
3  { col_1: '2', col_2: '4' }
4];
5
6toHaveTableRowCountLessThan(tableData, 1);
7// Fails, as the tables are length of 2