Registry / web-framework / react-native-table-component

react-native-table-component

library1.2.2jsnpmunverified

This package provides fundamental table components for React Native applications, enabling developers to display tabular data using `Table`, `Row`, `Rows`, `Col`, `Cols`, `Cell`, and `TableWrapper` components. The current stable version is 1.2.2. This library offers a straightforward API for structuring tables with customizable styling through React Native's `StyleSheet`. A significant aspect of this package is its current status: it is explicitly no longer maintained by the original author, who has offered to transfer ownership. This means there is no ongoing release cadence or active support. Key differentiators, aside from its unmaintained status, include its basic and unopinionated approach to table rendering, focusing solely on layout primitives rather than advanced features like sorting, filtering, or pagination, which would need to be implemented separately. It provides a simple structure for displaying static or dynamically generated data in a grid format suitable for mobile interfaces.

web-framework

npm install react-native-table-component

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-TABLE

react-native-table-component

web-frameworkjavascriptv1.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Table

✓ import { Table } from 'react-native-table-component';

✗ const { Table } = require('react-native-table-component');

Primary component for defining a table structure. CommonJS 'require' is generally discouraged in modern React Native.

Row

✓ import { Row } from 'react-native-table-component';

✗ import Row from 'react-native-table-component';

Used for displaying a single row of data. It's a named export, not a default export.

TableWrapper

✓ import { TableWrapper } from 'react-native-table-component';

✗ import { TableWraper } from 'react-native-table-component';

Used for grouping or wrapping other table elements. Note the 'Wrapper' spelling, as 'TableWraper' was a previous error corrected in v1.0.3.

This example demonstrates a basic table with a header row and multiple data rows, showcasing fundamental component usage and styling in a React Native application.

import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { Table, Row, Rows } from 'react-native-table-component'; export default class ExampleOne extends Component { constructor(props) { super(props); this.state = { tableHead: ['Head', 'Head2', 'Head3', 'Head4'], tableData: [ ['1', '2', '3', '4'], ['a', 'b', 'c', 'd'], ['1', '2', '3', '456\n789'], ['a', 'b', 'c', 'd'] ] } } render() { const state = this.state; return ( <View style={styles.container}> <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}> <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/> <Rows data={state.tableData} textStyle={styles.text}/> </Table> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, head: { height: 40, backgroundColor: '#f1f8ff' }, text: { margin: 6 } });

Debug

Known issues

gotchaThis package is explicitly no longer actively maintained by the original author. While it remains functional, new features, bug fixes, or compatibility updates for future React Native versions are unlikely unless a new maintainer takes over.

fix

Developers should be aware that they might need to fork the repository for critical updates or consider alternative maintained table libraries for production applications requiring ongoing support.

affects: >=1.0.0

breakingThe component name 'TableWraper' was corrected to 'TableWrapper'. Applications using the old, misspelled name will encounter errors after updating.

fix

Update all instances of `TableWraper` to `TableWrapper` in your code after upgrading to v1.0.3 or later.

affects: <1.0.3

breakingThe default `borderWidth` for the `Table` component changed from `1` to `0`. This can visually alter tables that relied on the implicit border.

fix

Explicitly set `borderStyle={{borderWidth: 1}}` (or your desired width) on your `Table` components to restore previous visual behavior after upgrading to v1.2.1 or later.

affects: <1.2.1

gotchaThe `data` prop for `Rows` and `Row` components can now accept Element types, allowing for custom React Native components within table cells. If you were previously relying on string-only data, ensure your logic handles mixed types.

fix

Review data handling for table cells, especially if cells contain custom components or complex rendering logic. No direct fix needed unless custom components are causing unexpected behavior.

affects: >=1.1.1

Errors

Common errors & fixes

TypeError: undefined is not a function (evaluating 'Table.render')

Attempting to use CommonJS `require` syntax or incorrect destructuring for named exports in a modern React Native project configured for ES modules.

fix

Ensure you are using ES module imports: `import { Table, Row, Rows } from 'react-native-table-component';`

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have a circular dependency.

This error often occurs when a component is imported with the wrong name, wrong casing, or if a renamed component (like `TableWraper` to `TableWrapper`) is still referenced by its old name.

fix

Verify all imported component names are spelled correctly and match their exported names exactly, including casing. Specifically, ensure `TableWrapper` is used if your package version is v1.0.3 or higher.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

react-nativerequiredCore dependency for all React Native UI components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/Gil2015/react-native-table-component ↗

packagehttps://www.npmjs.com/package/react-native-table-component ↗