https://github.com/jstarpl/react-tabular-input

A React input component that allows manipulation of structured text in a spreadsheet-like fashion, so that you can quickly type new data in.
https://github.com/jstarpl/react-tabular-input

component csv input react table tabular tsv

Last synced: 1 day ago
JSON representation

A React input component that allows manipulation of structured text in a spreadsheet-like fashion, so that you can quickly type new data in.

• Host: GitHub
• URL: https://github.com/jstarpl/react-tabular-input
• Owner: jstarpl
• License: mit
• Created: 2024-03-06T15:57:24.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-08-30T20:50:32.000Z (about 1 month ago)
• Last Synced: 2024-08-30T21:22:28.978Z (about 1 month ago)
• Topics: component, csv, input, react, table, tabular, tsv
• Language: TypeScript
• Homepage:
• Size: 414 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tabular Input for React

This is a React input component that allows manipulation of structured text in a spreadsheet-like fashion, so that you can quickly type new data in.

## Install

```

npm i -S @jstarpl/react-tabular-input

```

## Use

```JSX

Column 2>,

            tag: "C2",

            width: "100px",

        },

        {

            label: Column 3,

            tag: "C3",

            width: "3fr",

        },

    ]}

    showInsertButton

    draggable

    highlightRange={[0, 1]} // highlight rows from first index, up to, but excluding second index

    insertButtonLabel="Add new item" // string or JSX

    deleteButtonLabel={}

    onChange={setValue}

    shouldAllowDeleteRow={(recordIndex, recordCount) => true}

    />

```

## Extras

- Odd and even rows are marked using `data-odd-even="odd"` and `data-odd-even="even"` attributes

- Highlighted rows are marked using `data-highlight` attribute

## Requirements

Requires React >= 16 and a build tool that can resolve CSS imports (like webpack's `css-loader` or `vite`).