# table-react-native

> React Native Table Package, supports android ios expo

Latest version **0.1.2** (published 2023-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install table-react-native
pnpm add table-react-native
yarn add table-react-native
bun add table-react-native
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-05-13 |
| First published | 2023-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | alperbayram |
| Maintainers | alperbayram |
| Keywords | react-native, ios, android, expo, table, RN, react-component |

## Links

- npm: https://www.npmjs.com/package/table-react-native
- Repository: https://github.com/alperbayram/table-react-native
- Homepage: https://github.com/alperbayram/table-react-native#readme
- Issues: https://github.com/alperbayram/table-react-native/issues
- npm.io page: https://npm.io/package/table-react-native

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2023-05-13
- 0.1.1 — 2023-05-13
- 0.1.0 — 2023-05-12

## README

# table-react-native

<p>
  <!-- iOS -->
  <a href="https://itunes.apple.com/app/apple-store/id982107779">
    <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
  </a>
  <!-- Android -->
  <a href="https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample">
    <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
  </a>
  <!-- Web -->
  <a href="https://docs.expo.dev/workflow/web/">
    <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
  </a>
</p>

## Installation

```sh
npm install table-react-native
```

## Usage

```js
import * as React from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { Table, Tr, Td, Head, Body } from 'table-react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView
        style={{ display: 'flex', flexDirection: 'column' }}
        horizontal={false}
      >
        <ScrollView horizontal={true}>
          <Table widths={[150, 150, 160]}>
            <Head style={{ backgroundColor: '#F9FAFB' }}>
              <Tr>
                <Td style={styles.Td}>
                  <Text style={styles.tableHeadertext}>First Name</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text style={styles.tableHeadertext}>Last Name</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text style={styles.tableHeadertext}>Phone Number</Text>
                </Td>
              </Tr>
            </Head>
            <Body>
              <Tr style={styles.Tr}>
                <Td style={styles.Td}>
                  <Text>Ibrahim</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text>Kazımov</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text>+9999999999</Text>
                </Td>
              </Tr>
              <Tr style={styles.Tr}>
                <Td style={styles.Td}>
                  <Text>Alper</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text>Bayram</Text>
                </Td>
                <Td style={styles.Td}>
                  <Text>+123231123</Text>
                </Td>
              </Tr>
            </Body>
          </Table>
        </ScrollView>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 55,
  },
  Td: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  Tr: {
    borderBottomWidth: 1,
    borderBottomColor: '#d1d5db',
  },
  tableHeadertext: {
    fontWeight: '400',
    textTransform: 'uppercase',
  },
});
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---
_Source: https://npm.io/package/table-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
