Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
---
name: Bug report
about: Create a report to help us improve
title: "[DESCRIPTION]"
labels: ''
title: "[BUG]: "
labels: 'bug'
assignees: ''

---

## Issue Check list
- [ ] Agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [ ] Read the README
- [ ] You are using React 16.8.0+
- [ ] You installed `styled-components`
- [ ] Include relevant code or preferably a [code sandbox](https://codesandbox.io/embed/react-data-table-sandbox-ccyuu
)
## Checklist

- [ ] I agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [ ] I searched [existing issues](https://github.com/jbetancur/react-data-table-component/issues?q=is%3Aissue) and this is not a duplicate
- [ ] I read the [documentation](https://reactdatatable.com)
- [ ] I am using React 18+
- [ ] I can reproduce this with a minimal example (sandbox link below)

## Describe the bug

A clear and concise description of what the bug is.

## To Reproduce

Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

1.
2.
3.

## Expected behavior
A clear and concise description of what you expected to happen.

## Code Sandbox, Screenshots, or Relevant Code
Please include a codesandbox to help **expedite** troublshooting.
What you expected to happen.

## Actual behavior

What actually happens.

## Minimal reproduction

https://codesandbox.io/embed/react-data-table-sandbox-ccyuu
**A minimal reproduction is required — issues without one may be closed.**

Otherwise, add screenshots and/or complete sample code to help explain your problem.
<!-- Provide a public GitHub repo, CodeSandbox, StackBlitz, or a self-contained code snippet that reproduces the issue. -->

## Versions (please complete the following information)
- React (RDT requires 16.8.0+)
- Styled Components
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari, firefox]
## Versions

## Additional context
Add any other context about the problem here.
- react-data-table-component:
- React:
- Browser:
- OS:
7 changes: 7 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Documentation & Recipes
url: https://reactdatatable.com
about: Check the docs and recipes — most questions are already answered here.
- name: GitHub Discussions
url: https://github.com/jbetancur/react-data-table-component/discussions
about: Ask usage questions, share ideas, or get help from the community.
26 changes: 13 additions & 13 deletions .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
name: Feature request
about: Suggest an idea for this project
title: "[FEATURE]: [SHORT DESCRIPTION]"
labels: ''
title: "[FEATURE]: "
labels: 'enhancement'
assignees: ''

---

## Feature Check list
## Checklist

- [ ] Agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [ ] Read the README to ensure the feature is not already present
- [ ] You read [Creating Issues, Features and Pull Requests](https://github.com/jbetancur/react-data-table-component/issues/387)
- [ ] Considered the value versus complexity for all users of the library as well as library maintenance
- [ ] Considered if this can be a storybook or documentation example
- [ ] I agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [ ] I searched [existing issues](https://github.com/jbetancur/react-data-table-component/issues?q=is%3Aissue) and this has not been requested before
- [ ] I read the [documentation](https://reactdatatable.com) and this feature does not already exist
- [ ] I considered whether this could be solved with a documentation example or recipe instead
- [ ] I considered the maintenance burden and value for all library users

## Is your feature request related to a problem? Please describe
## Is your feature request related to a problem?

A clear and concise description of what the feature is.
A clear and concise description of what the problem is.

## Describe the solution you'd like

A clear and concise description of what you want to happen.

## Describe alternatives you've considered
## Alternatives considered

A clear and concise description of any alternative solutions or features you've considered.
Any alternative solutions or workarounds you've considered.

## Additional context

Add any other context or screenshots about the feature request here.
Screenshots, examples, or any other context about the feature request.
34 changes: 34 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!--
Before opening a PR, please read CONTRIBUTING.md.
PRs without a clear description or linked issue may be closed without review.
-->

## Summary

<!-- What does this PR do and why? Link the issue it addresses. -->

Fixes #

## Type of change

- [ ] Bug fix
- [ ] New feature
- [ ] Breaking change
- [ ] Documentation / example update
- [ ] Refactor / internal cleanup

## Checklist

- [ ] I read [CONTRIBUTING.md](https://github.com/jbetancur/react-data-table-component/blob/master/CONTRIBUTING.md)
- [ ] I agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [ ] Tests pass (`npm test`)
- [ ] No TypeScript errors (`npm run typecheck`)
- [ ] I have updated docs or examples if needed

## Breaking changes

<!-- If this is a breaking change, describe what breaks and the migration path. Otherwise delete this section. -->

## How to test

<!-- Steps or sandbox link to verify this works. -->
9 changes: 5 additions & 4 deletions .github/stale.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ exemptLabels:
- security
- enhancement
- feature
- bug
# Label to use when marking an issue as stale
staleLabel: wontfix
staleLabel: stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
This issue has been automatically marked as stale due to inactivity.
It will be closed in 7 days if there is no further activity.
If this is still relevant, please leave a comment or update the issue.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false
32 changes: 32 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: CI

on:
pull_request:
branches: [master]

jobs:
ci:
name: Lint, typecheck, test, build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm

- name: Install dependencies
run: npm ci

- name: Lint
run: npm run lint

- name: Typecheck
run: npm run typecheck

- name: Test
run: npm test

- name: Build
run: npm run build
46 changes: 46 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Contributing

Thanks for your interest in contributing. Please read this before opening a PR.

## What gets merged

This is a focused, stable library. The bar for new features is high — complexity must be justified by broad utility. Most things that feel like features are better solved with a documentation example.

PRs that get merged quickly:

- Bug fixes with a clear reproduction
- TypeScript or accessibility improvements
- Documentation or example improvements

PRs that get closed:

- No linked issue or description
- Adds niche features better handled in userland
- Breaks existing API without strong justification
- Fails CI (lint, typecheck, tests, build)

## Before you open a PR

1. **Open an issue first** for anything non-trivial. Alignment before code saves everyone time.
2. **Keep the scope small.** One concern per PR.
3. **Check CI passes** locally before pushing: `npm run lint && npm run typecheck && npm test && npm run build`

## Development setup

```bash
npm install
npm test # run tests
npm run typecheck # check types
npm run lint # check lint
npm run build # build the library
```

## Code style

- TypeScript, no `any`
- Prettier + ESLint enforced — run `npm run format` if needed
- No new dependencies without discussion

## Questions

Usage questions belong in [Discussions](https://github.com/jbetancur/react-data-table-component/discussions) or the [docs](https://reactdatatable.com), not issues or PRs.
63 changes: 63 additions & 0 deletions apps/docs/src/components/demos/ExportDemo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useState } from 'react';
import DataTable from '../ThemedDataTable';
import { useTableExport, type TableColumn } from 'react-data-table-component';

interface Employee {
id: number;
name: string;
department: string;
salary: number;
}

const data: Employee[] = [
{ id: 1, name: 'Aria Chen', department: 'Engineering', salary: 155000 },
{ id: 2, name: 'Marcus Webb', department: 'Product', salary: 132000 },
{ id: 3, name: 'Priya Kapoor', department: 'Design', salary: 118000 },
{ id: 4, name: 'Jordan Ellis', department: 'Analytics', salary: 143000 },
{ id: 5, name: 'Sam Rivera', department: 'Engineering', salary: 128000 },
{ id: 6, name: 'Taylor Brooks', department: 'Sales', salary: 97000 },
];

const columns: TableColumn<Employee>[] = [
{ id: 'name', name: 'Name', selector: r => r.name, sortable: true },
{ id: 'department', name: 'Department', selector: r => r.department, sortable: true },
{ id: 'salary', name: 'Salary', selector: r => r.salary, right: true,
format: r => `$${r.salary.toLocaleString()}` },
];

export default function ExportDemo() {
const [copied, setCopied] = useState(false);
const { download, copy } = useTableExport({ columns, rows: data, valueSource: 'format' });

async function handleCopy(format: 'csv' | 'json') {
await copy(format);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}

return (
<div className="space-y-3">
<div className="flex items-center gap-2 text-sm flex-wrap">
<button
onClick={() => download('employees.csv')}
className="px-3 py-1.5 text-xs border border-gray-200 rounded-md text-gray-600 hover:border-gray-300 hover:text-gray-900"
>
Download CSV
</button>
<button
onClick={() => download('employees.json', 'json')}
className="px-3 py-1.5 text-xs border border-gray-200 rounded-md text-gray-600 hover:border-gray-300 hover:text-gray-900"
>
Download JSON
</button>
<button
onClick={() => handleCopy('csv')}
className="px-3 py-1.5 text-xs border border-gray-200 rounded-md text-gray-600 hover:border-gray-300 hover:text-gray-900"
>
{copied ? 'Copied!' : 'Copy CSV'}
</button>
</div>
<DataTable columns={columns} data={data} />
</div>
);
}
Loading
Loading