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: about 1 month 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 (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-20T10:29:54.000Z (about 1 year ago)
- Last Synced: 2025-08-05T16:17:10.610Z (8 months ago)
- Topics: component, csv, input, react, table, tabular, tsv
- Language: TypeScript
- Homepage:
- Size: 480 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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`).