JavaScript Element ariaRowCount Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAROWCOUNT

Definition

Element.ariaRowCount reflects the aria-rowcount attribute: the total number of rows in a table, grid, or treegrid (MDN). The value is a string integer (for example "100").

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaRowCount. Start with this line.

JavaScript
el.ariaRowCount / el.ariaRowCount = value
CallWhat it does
el.ariaRowCount / el.ariaRowCount = valuePrimary signature.

Built into the browser. Read or assign el.ariaRowCount — no import required.

Library declarations
JavaScript
el.ariaRowCount / el.ariaRowCount = value

Parameters

ParameterDescription
Table / grid hostRequired. Where total row count is declared
String integerRequired. Full size, or "-1" if unknown

Return Value

Return ValueDescription
*The current value of el.ariaRowCount.

JavaScript Examples

Example 1 — Read ariaRowCount

Log the total row count from a partially rendered table.

JavaScript
const el = document.getElementById("semantic-table");
console.log(el.ariaRowCount); // "100"

// HTML: <table … aria-rowcount="100"> with only some rows in the DOM
Try It Yourself

How It Works

  1. Find the table. getElementById returns the table/grid host.
  2. Read the reflection. ariaRowCount returns the aria-rowcount string.
  3. Interpret "100". The full dataset has 100 rows, even if fewer are rendered.
  4. Missing attribute. If unset, many browsers return null.

Example 2 — Update the Total (MDN)

MDN: change the reported total from "100" to "101".

JavaScript
const el = document.getElementById("semantic-table");

console.log(el.ariaRowCount); // "100"
el.ariaRowCount = "101";
console.log(el.ariaRowCount); // "101"
console.log(el.getAttribute("aria-rowcount")); // "101"
Try It Yourself

How It Works

  1. Start at 100. The first log shows the initial total.
  2. Assign a string. el.ariaRowCount = "101" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "101".
  4. In a real UI. Update this whenever inserts/deletes change the full dataset size.

Example 3 — Unknown Size with "-1"

When the full row total is unknown, tell the browser not to guess (MDN).

JavaScript
const grid = document.createElement("div");
grid.setAttribute("role", "grid");
grid.ariaRowCount = "-1";

console.log(grid.ariaRowCount);                  // "-1"
console.log(grid.getAttribute("aria-rowcount")); // "-1"

// Later, when the API returns a total:
grid.ariaRowCount = "24";
console.log(grid.ariaRowCount); // "24"
Try It Yourself

How It Works

  1. Create a grid host. Partial data often lives in a role="grid" widget.
  2. Set "-1". Means “total unknown — do not auto-count DOM rows.”
  3. Confirm reflection. Property and attribute store "-1".
  4. Upgrade later. When the real total arrives, assign the string integer (here "24").
Compatibility

Browser Support

Element.ariaRowCount is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaRowCount

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaRowCount IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaRowCount Excellent

Bottom line: Safe for modern web apps. Keep the string integer in sync with your dataset size, and use -1 when the total is unknown.

Frequently Asked Questions

It reflects the aria-rowcount attribute as a string containing an integer that defines the total number of rows in a table, grid, or treegrid — including rows that may not be in the DOM yet.
No. MDN marks Element.ariaRowCount as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string containing an integer (for example "100" or "101"), not a Number type. Use "-1" when the total size is unknown.
When only a subset of rows is loaded in the DOM (virtualized or paged tables). If every row is present, browsers can count them and you usually omit aria-rowcount (MDN).
ariaRowCount is the total rows. ariaRowIndex marks a row’s position in that full set. ariaColCount is the total columns.
Yes. Reading and writing ariaRowCount updates the reflected aria-rowcount attribute. Keep it in sync when more rows load or the dataset size changes.

Next: ariaRowIndex

Learn the reflected aria-rowindex property for a row’s position in the full table.

ariaRowIndex tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaRoleDescription Property JavaScript Element ariaRowIndex Property