= ({ data, someTitleProp }) => {
93 | return (
94 | <>
95 | {someTitleProp}
96 | {data.title}
97 | {data.director}
98 | {data.year}
99 |
100 | );
101 | };
102 | ```
103 |
104 | ## Accessibility
105 |
106 | You can tab through expanders and use the space bar or enter keys to expand.
107 |
--------------------------------------------------------------------------------
/stories/DataTable/expandable/basic.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './basic.mdx';
3 | import tableDataItems from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const ExpandedComponent = ({ data }) => {JSON.stringify(data, null, 2)};
7 |
8 | const columns = [
9 | {
10 | name: 'Title',
11 | selector: row => row.title,
12 | sortable: true,
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Year',
21 | selector: row => row.year,
22 | sortable: true,
23 | },
24 | ];
25 |
26 | const BasicStory = ({ expandableRows, expandOnRowClicked, expandOnRowDoubleClicked, expandableRowsHideExpander }) => (
27 |
38 | );
39 |
40 | const Template = args => ;
41 |
42 | export const Basic = Template.bind({});
43 |
44 | Basic.args = {
45 | expandableRows: true,
46 | expandOnRowClicked: false,
47 | expandOnRowDoubleClicked: false,
48 | expandableRowsHideExpander: false,
49 | };
50 |
51 | export default {
52 | title: 'Expandable/Basic',
53 | component: Basic,
54 | parameters: {
55 | docs: {
56 | page: doc,
57 | },
58 | },
59 | };
60 |
--------------------------------------------------------------------------------
/stories/DataTable/expandable/preDisabled.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pre Disabled Rows
4 |
5 | To pre-disable rows based on your data:
6 |
7 | ```js
8 | ...
9 | const rowPreDisabled = row => row.disabled;
10 |
11 | function MyComponent() {
12 | return (
13 |
19 | );
20 | }
21 | ```
22 |
23 |
--------------------------------------------------------------------------------
/stories/DataTable/expandable/preDisabled.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './preDisabled.mdx';
3 | import tableDataItems from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const ExpandedComponent = ({ data }) => {JSON.stringify(data, null, 2)};
7 |
8 | const columns = [
9 | {
10 | name: 'Title',
11 | selector: row => row.title,
12 | sortable: true,
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Year',
21 | selector: row => row.year,
22 | sortable: true,
23 | },
24 | ];
25 |
26 | export const PreDisabled = () => {
27 | const data = tableDataItems.map(item => {
28 | let disabled = false;
29 | if (Number(item.year) < 2000) {
30 | disabled = true;
31 | }
32 | return { ...item, disabled };
33 | });
34 | return (
35 | row.disabled}
41 | expandableRowsComponent={ExpandedComponent}
42 | pagination
43 | />
44 | );
45 | };
46 |
47 | export default {
48 | title: 'Expandable/Pre Disabled ',
49 | component: PreDisabled,
50 | parameters: {
51 | docs: {
52 | page: doc,
53 | },
54 | },
55 | };
56 |
--------------------------------------------------------------------------------
/stories/DataTable/expandable/preExpanded.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pre Selected Rows
4 |
5 | To pre-select rows based on your data:
6 |
7 | ```js
8 | ...
9 | const rowPreExpanded = row => row.defaultExpanded
10 |
11 | function MyComponent() {
12 | return (
13 |
19 | );
20 | }
21 | ```
22 |
23 |
26 |
--------------------------------------------------------------------------------
/stories/DataTable/expandable/preExpanded.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './preExpanded.mdx';
3 | import tableDataItems from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const ExpandedComponent = ({ data }) => {JSON.stringify(data, null, 2)};
7 |
8 | const columns = [
9 | {
10 | name: 'Title',
11 | selector: row => row.title,
12 | sortable: true,
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Year',
21 | selector: row => row.year,
22 | sortable: true,
23 | },
24 | ];
25 |
26 | export const PreExpanded = () => {
27 | const data = tableDataItems;
28 | data[0].defaultExpanded = true;
29 |
30 | return (
31 | row.defaultExpanded}
37 | expandableRowsComponent={ExpandedComponent}
38 | pagination
39 | />
40 | );
41 | };
42 |
43 | export default {
44 | title: 'Expandable/Pre Expanded ',
45 | component: PreExpanded,
46 | parameters: {
47 | docs: {
48 | page: doc,
49 | },
50 | },
51 | };
52 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/linearProgressBar.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Material Progress
4 |
5 | Adding a custom progress bar is easy, in this case let's add Material UI's Linear Progress bar by passing in a `progressComponent`:
6 |
7 | ```js
8 | import React from 'react';
9 | import doc from './linearProgressBar.mdx';
10 | import { makeStyles } from '@material-ui/core/styles';
11 | import LinearProgress from '@material-ui/core/LinearProgress';
12 | import data from '../../constants/sampleMovieData';
13 | import DataTable from '../../../src/index';
14 |
15 | const useStyles = makeStyles(theme => ({
16 | root: {
17 | width: '100%',
18 | '& > * + *': {
19 | marginTop: theme.spacing(2),
20 | },
21 | },
22 | }));
23 |
24 | // The Material UI way...
25 | const LinearIndeterminate = () => {
26 | const classes = useStyles();
27 |
28 | return (
29 |
30 |
31 |
32 | );
33 | };
34 |
35 | function MyComponent() {
36 | return (
37 | }
42 | />
43 | );
44 | };
45 | ```
46 |
47 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/linearProgressBar.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './linearProgressBar.mdx';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 | import data from '../../constants/sampleMovieData';
6 | import DataTable from '../../../src/index';
7 |
8 | const useStyles = makeStyles(theme => ({
9 | root: {
10 | width: '100%',
11 | '& > * + *': {
12 | marginTop: theme.spacing(2),
13 | },
14 | },
15 | }));
16 |
17 | const LinearIndeterminate = () => {
18 | const classes = useStyles();
19 |
20 | return (
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | const columns = [
28 | {
29 | name: 'Title',
30 | selector: 'title',
31 | sortable: true,
32 | },
33 | {
34 | name: 'Director',
35 | selector: 'director',
36 | sortable: true,
37 | },
38 | {
39 | name: 'Year',
40 | selector: 'year',
41 | sortable: true,
42 | },
43 | ];
44 |
45 | const ProgressStory = ({ progressPending, persistTableHead }) => {
46 | return (
47 | }
53 | persistTableHead={persistTableHead}
54 | pagination
55 | />
56 | );
57 | };
58 |
59 | const Template = args => ;
60 |
61 | export const Progress = Template.bind({});
62 |
63 | Progress.args = {
64 | persistTableHead: false,
65 | progressPending: true,
66 | };
67 |
68 | export default {
69 | title: 'UI Library/Material UI/Progress',
70 | component: Progress,
71 | parameters: {
72 | docs: {
73 | page: doc,
74 | },
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/pagination.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Material Pagination Component
4 |
5 | React Data Table already has a "Material" looking Pagination, but if you want to go a step further you can integration Material UI's Pagination component.
6 |
7 | Using the `paginationComponent` property is you can access React Data Tables internal pagination properties.
8 |
9 | ```js
10 | ({ rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) => ...
11 | ```
12 |
13 | ## Import and Create our Material UI Pagination Component
14 |
15 | ```js
16 | import React from 'react';
17 | import TablePagination from '@material-ui/core/TablePagination';
18 | import IconButton from '@material-ui/core/IconButton';
19 | import FirstPageIcon from '@material-ui/icons/FirstPage';
20 | import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
21 | import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
22 | import LastPageIcon from '@material-ui/icons/LastPage';
23 |
24 | function TablePaginationActions({ count, page, rowsPerPage, onChangePage }) {
25 | const handleFirstPageButtonClick = () => {
26 | onChangePage(1);
27 | };
28 |
29 | // RDT uses page index starting at 1, MUI starts at 0
30 | // i.e. page prop will be off by one here
31 | const handleBackButtonClick = () => {
32 | onChangePage(page);
33 | };
34 |
35 | const handleNextButtonClick = () => {
36 | onChangePage(page + 2);
37 | };
38 |
39 | const handleLastPageButtonClick = () => {
40 | onChangePage(getNumberOfPages(count, rowsPerPage));
41 | };
42 |
43 | return (
44 | <>
45 |
46 |
47 |
48 |
49 |
50 |
51 | = getNumberOfPages(count, rowsPerPage) - 1}
54 | aria-label="next page"
55 | >
56 |
57 |
58 | = getNumberOfPages(count, rowsPerPage) - 1}
61 | aria-label="last page"
62 | >
63 |
64 |
65 |
66 | );
67 | }
68 |
69 | const CustomMaterialPagination = ({ rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) => (
70 | onChangeRowsPerPage(Number(target.value))}
77 | ActionsComponent={TablePaginationActions}
78 | />
79 | );
80 |
81 | export default CustomMaterialPagination'
82 | ```
83 |
84 | You can now pass `CustomMaterialPagination` to `paginationComponent`
85 |
86 | ```js
87 | ...
88 |
94 | ...
95 | ```
96 |
97 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/pagination.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './pagination.mdx';
3 | import TablePagination from '@material-ui/core/TablePagination';
4 | import IconButton from '@material-ui/core/IconButton';
5 | import FirstPageIcon from '@material-ui/icons/FirstPage';
6 | import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
7 | import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
8 | import LastPageIcon from '@material-ui/icons/LastPage';
9 | import { getNumberOfPages } from '../../../src/DataTable/util';
10 | import DataTable from '../../../src/index';
11 | import data from '../../constants/sampleMovieData';
12 |
13 | const columns = [
14 | {
15 | name: 'Title',
16 | selector: row => row.title,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Director',
21 | selector: row => row.director,
22 | sortable: true,
23 | },
24 | {
25 | name: 'Year',
26 | selector: row => row.year,
27 | sortable: true,
28 | },
29 | ];
30 |
31 | function TablePaginationActions({ count, page, rowsPerPage, onChangePage }) {
32 | const handleFirstPageButtonClick = () => {
33 | onChangePage(1);
34 | };
35 |
36 | // RDT uses page index starting at 1, MUI starts at 0
37 | // i.e. page prop will be off by one here
38 | const handleBackButtonClick = () => {
39 | onChangePage(page);
40 | };
41 |
42 | const handleNextButtonClick = () => {
43 | onChangePage(page + 2);
44 | };
45 |
46 | const handleLastPageButtonClick = () => {
47 | onChangePage(getNumberOfPages(count, rowsPerPage));
48 | };
49 |
50 | return (
51 | <>
52 |
53 |
54 |
55 |
56 |
57 |
58 | = getNumberOfPages(count, rowsPerPage) - 1}
61 | aria-label="next page"
62 | >
63 |
64 |
65 | = getNumberOfPages(count, rowsPerPage) - 1}
68 | aria-label="last page"
69 | >
70 |
71 |
72 |
73 | );
74 | }
75 |
76 | export const CustomMaterialPagination = ({ rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) => (
77 | onChangeRowsPerPage(Number(target.value))}
84 | ActionsComponent={TablePaginationActions}
85 | />
86 | );
87 |
88 | export function Pagination() {
89 | return (
90 |
97 | );
98 | }
99 |
100 | export default {
101 | title: 'UI Library/Material UI/Pagination',
102 | component: Pagination,
103 | parameters: {
104 | docs: {
105 | page: doc,
106 | },
107 | },
108 | };
109 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/table.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Make Our Table Material Design
4 |
5 | Let's override the built-in checkboxes and sort icon with some [Material Ui](https://material-ui.com) sexiness:
6 |
7 | ```js
8 | ...
9 | import Checkbox from '@mataerial-ui/core/Checkbox';
10 | import ArrowDownward from '@material-ui/icons/ArrowDownward';
11 |
12 | ...
13 |
14 | const MyComponent = () => (
15 | } // use a material icon for our sort icon. rdt will rotate the icon 180 degrees for you
23 | />
24 | );
25 | ```
26 |
27 | ## Using Custom Checkboxes and Indeterminate State
28 |
29 | Sometimes UI Library checkbox components have their own way of handling indeterminate state. We don't want React Data Table hard coded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal `Checkbox` for use with `indeterminate` functionality.
30 |
31 | Example Usage:
32 |
33 | ```js
34 |
35 | import Checkbox from '@mataerial-ui/core/Checkbox';
36 |
37 | ...
38 |
39 | /*
40 | In this example, the Material Ui ui lib determines its own indeterminate state via the `indeterminate` property.
41 | Let's override it using selectableRowsComponentProps`
42 | */
43 | const selectProps = { indeterminate: isIndeterminate => isIndeterminate };
44 |
45 | const MyComponent = () => (
46 |
54 | );
55 | ```
56 |
57 | **Note** This is currently only supported for indeterminate state, but may be expanded in the future if there is a demand.
58 |
59 | # Material Compliant Table!
60 |
61 |
--------------------------------------------------------------------------------
/stories/DataTable/material-ui/table.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './table.mdx';
3 | import differenceBy from 'lodash/differenceBy';
4 | import Card from '@material-ui/core/Card';
5 | import IconButton from '@material-ui/core/IconButton';
6 | import Checkbox from '@material-ui/core/Checkbox';
7 | import ArrowDownward from '@material-ui/icons/ArrowDownward';
8 | import Delete from '@material-ui/icons/Delete';
9 | import Add from '@material-ui/icons/Add';
10 | import tableDataItems from '../../constants/sampleDesserts';
11 | import DataTable from '../../../src/index';
12 |
13 | const sortIcon = ;
14 | const selectProps = { indeterminate: isIndeterminate => isIndeterminate };
15 | const actions = (
16 |
17 |
18 |
19 | );
20 | const contextActions = deleteHandler => (
21 |
22 |
23 |
24 | );
25 |
26 | const columns = [
27 | {
28 | name: 'Name',
29 | selector: row => row.name,
30 | sortable: true,
31 | grow: 2,
32 | reorder: true,
33 | },
34 | {
35 | name: 'Type',
36 | selector: row => row.type,
37 | sortable: true,
38 | reorder: true,
39 | },
40 | {
41 | name: 'Calories (g)',
42 | selector: row => row.calories,
43 | sortable: true,
44 | right: true,
45 | reorder: true,
46 | },
47 | {
48 | name: 'Fat (g)',
49 | selector: row => row.fat,
50 | sortable: true,
51 | right: true,
52 | reorder: true,
53 | },
54 | {
55 | name: 'Carbs (g)',
56 | selector: row => row.carbs,
57 | sortable: true,
58 | right: true,
59 | reorder: true,
60 | },
61 | {
62 | name: 'Protein (g)',
63 | selector: row => row.protein,
64 | sortable: true,
65 | right: true,
66 | reorder: true,
67 | },
68 | {
69 | name: 'Sodium (mg)',
70 | selector: row => row.sodium,
71 | sortable: true,
72 | right: true,
73 | reorder: true,
74 | },
75 | {
76 | name: 'Calcium (%)',
77 | selector: row => row.calcium,
78 | sortable: true,
79 | right: true,
80 | reorder: true,
81 | },
82 | {
83 | name: 'Iron (%)',
84 | selector: row => row.iron,
85 | sortable: true,
86 | right: true,
87 | reorder: true,
88 | },
89 | ];
90 |
91 | function MaterialStory({ selectableRows, expandableRows }) {
92 | const [selectedRows, setSelectedRows] = React.useState([]);
93 | const [toggleCleared, setToggleCleared] = React.useState(false);
94 | const [data, setData] = React.useState(tableDataItems);
95 |
96 | const handleChange = () => {
97 | setSelectedRows(selectedRows);
98 | };
99 |
100 | const handleRowClicked = row => {
101 | // eslint-disable-next-line no-console
102 | console.log(`${row.name} was clicked!`);
103 | };
104 |
105 | const deleteAll = () => {
106 | const rows = selectedRows.map(r => r.name);
107 | // eslint-disable-next-line no-alert
108 | if (window.confirm(`Are you sure you want to delete:\r ${rows}?`)) {
109 | setToggleCleared(!toggleCleared);
110 | setData(differenceBy(data, selectedRows, 'name'));
111 | }
112 | };
113 |
114 | return (
115 |
116 |
135 |
136 | );
137 | }
138 |
139 | const Template = args => ;
140 |
141 | export const Table = Template.bind({});
142 |
143 | Table.args = {
144 | selectableRows: true,
145 | expandableRows: true,
146 | };
147 |
148 | export default {
149 | title: 'UI Library/Material UI/Table',
150 | component: Table,
151 | parameters: {
152 | docs: {
153 | page: doc,
154 | },
155 | },
156 | };
157 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/basic.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pagination
4 |
5 | Adding client side pagination functionality is easy:
6 |
7 | ```js
8 | function MyComponent() {
9 | return (
10 |
15 | );
16 | };
17 | ```
18 |
19 |
22 |
23 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/basic.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './basic.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const columns = [
7 | {
8 | name: 'Title',
9 | selector: row => row.title,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Director',
14 | selector: row => row.director,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Year',
19 | selector: row => row.year,
20 | sortable: true,
21 | },
22 | ];
23 |
24 | export const Basic = () => ;
25 |
26 | export default {
27 | title: 'Pagination/Basic',
28 | component: Basic,
29 | parameters: {
30 | docs: {
31 | page: doc,
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/options.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pagination Component Options
4 |
5 | `paginationComponentOptions`allow you to provide options to the built-in in Pagination component.
6 |
7 | | Property | Type | Description |
8 | | --------------------- | ------- | ----------------------------------------------------- |
9 | | noRowsPerPage | boolean | hide the rows per page dropdown |
10 | | rowsPerPageText | string | change the rows per page text |
11 | | rangeSeparatorText | string | change the seperator text e.g. 1 - 10 'of' 100 rows |
12 | | selectAllRowsItem | boolean | show 'All' as an option in the rows per page dropdown |
13 | | selectAllRowsItemText | string | change the rows per page text |
14 |
15 | ```js
16 | const paginationComponentOptions = {
17 | rowsPerPageText: 'Filas por página',
18 | rangeSeparatorText: 'de',
19 | selectAllRowsItem: true,
20 | selectAllRowsItemText: 'Todos',
21 | };
22 |
23 | function MyComponent() {
24 | return ;
25 | }
26 | ```
27 |
28 | ## Custom Pagination Component `paginationComponentOptions`
29 |
30 | When using `paginationComponent` the `paginationComponentOptions` above become irrelevent. Instead, `paginationComponentOptions` can be used to pass whatever options you need to your custom Pagination component
31 |
32 |
35 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/options.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './options.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const columns = [
7 | {
8 | name: 'Título',
9 | selector: row => row.title,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Director',
14 | selector: row => row.director,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Año',
19 | selector: row => row.year,
20 | sortable: true,
21 | },
22 | ];
23 |
24 | const paginationComponentOptions = {
25 | rowsPerPageText: 'Filas por página',
26 | rangeSeparatorText: 'de',
27 | selectAllRowsItem: true,
28 | selectAllRowsItemText: 'Todos',
29 | };
30 |
31 | export const Options = () => (
32 |
39 | );
40 |
41 | export default {
42 | title: 'Pagination/Options',
43 | component: Options,
44 | parameters: {
45 | docs: {
46 | page: doc,
47 | },
48 | },
49 | };
50 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/remote.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Remote Pagination
4 |
5 | To enable remote/manual pagination you'll need to add the `paginationServer` property and ensure the remote API you are using supports pagination metadata.
6 |
7 | You'll also need to implement the `onChangeRowsPerPage`, and `onChangePage` callbacks.
8 |
9 | Finally, you'll need to keep track of your total rows using `paginationTotalRows`. This should be obtained from the remote API you are calling from to get the pagnination records.
10 |
11 | The following covers a working example of remote pagniation:
12 |
13 |
16 |
--------------------------------------------------------------------------------
/stories/DataTable/pagination/remote.stories.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import doc from './remote.mdx';
3 | import axios from 'axios';
4 | import DataTable from '../../../src/index';
5 |
6 | const columns = [
7 | {
8 | name: 'First Name',
9 | selector: row => row.first_name,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Last Name',
14 | selector: row => row.last_name,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Email',
19 | selector: row => row.email,
20 | sortable: true,
21 | },
22 | ];
23 |
24 | export const Remote = () => {
25 | const [data, setData] = useState([]);
26 | const [loading, setLoading] = useState(false);
27 | const [totalRows, setTotalRows] = useState(0);
28 | const [perPage, setPerPage] = useState(10);
29 |
30 | const fetchUsers = async page => {
31 | setLoading(true);
32 |
33 | const response = await axios.get(`https://reqres.in/api/users?page=${page}&per_page=${perPage}&delay=1`);
34 |
35 | setData(response.data.data);
36 | setTotalRows(response.data.total);
37 | setLoading(false);
38 | };
39 |
40 | const handlePageChange = page => {
41 | fetchUsers(page);
42 | };
43 |
44 | const handlePerRowsChange = async (newPerPage, page) => {
45 | setLoading(true);
46 |
47 | const response = await axios.get(`https://reqres.in/api/users?page=${page}&per_page=${newPerPage}&delay=1`);
48 |
49 | setData(response.data.data);
50 | setPerPage(newPerPage);
51 | setLoading(false);
52 | };
53 |
54 | useEffect(() => {
55 | fetchUsers(1); // fetch page 1 of users
56 | // eslint-disable-next-line react-hooks/exhaustive-deps
57 | }, []);
58 |
59 | return (
60 |
71 | );
72 | };
73 |
74 | export default {
75 | title: 'Pagination/Remote',
76 | component: Remote,
77 | parameters: {
78 | docs: {
79 | page: doc,
80 | },
81 | },
82 | };
83 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/basic.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Selectable Rows
4 |
5 | Adding Selectable Rows functionality is easy. Let's make our rows selectable and also access selected results `onSelectedRowsChange`:
6 |
7 | ```js
8 | function MyComponent() {
9 | const handleChange = ({ selectedRows }) => {
10 | // You can set state or dispatch with something like Redux so we can use the retrieved data
11 | console.log('Selected Rows: ', selectedRows);
12 | };
13 |
14 | return (
15 |
21 | );
22 | };
23 | ```
24 |
25 |
28 |
29 | ## Accessibility
30 |
31 | You can tab through checkboxes and use the space bar to expand.
32 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/basic.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './basic.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const columns = [
7 | {
8 | name: 'Title',
9 | selector: row => row.title,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Director',
14 | selector: row => row.director,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Year',
19 | selector: row => row.year,
20 | sortable: true,
21 | },
22 | ];
23 |
24 | export const Basic = () => ;
25 |
26 | export default {
27 | title: 'Selectable/Basic',
28 | component: Basic,
29 | parameters: {
30 | docs: {
31 | page: doc,
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/preDisabled.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pre Disabled Rows
4 |
5 | To pre-disable rows based on your data:
6 |
7 | ```js
8 | ...
9 | const rowDisabledCriteria = row => row.isOutOfStock;
10 |
11 | function MyComponent() {
12 | return (
13 |
19 | );
20 | }
21 | ```
22 |
23 |
26 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/preDisabled.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './preDisabled.mdx';
3 | import DataTable from '../../../src/index';
4 | import data from '../../constants/sampleDesserts';
5 |
6 | const columns = [
7 | {
8 | name: 'Name',
9 | selector: row => row.name,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Type',
14 | selector: row => row.type,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Out of Stock',
19 | selector: row => row.isOutOfStock,
20 | sortable: true,
21 | cell: row => {row.isOutOfStock ? 'Yes' : 'No'}
,
22 | },
23 | {
24 | name: 'Calories (g)',
25 | selector: row => row.calories,
26 | sortable: true,
27 | right: true,
28 | },
29 | {
30 | name: 'Fat (g)',
31 | selector: row => row.fat,
32 | sortable: true,
33 | right: true,
34 | },
35 | {
36 | name: 'Carbs (g)',
37 | selector: row => row.carbs,
38 | sortable: true,
39 | },
40 | ];
41 |
42 | const customData = data.map(datum => ({ ...datum, isOutOfStock: false }));
43 |
44 | customData[1].isOutOfStock = true;
45 | customData[3].isOutOfStock = true;
46 |
47 | const rowDisabledCriteria = row => row.isOutOfStock;
48 |
49 | export const PreDisabled = () => (
50 |
58 | );
59 |
60 | export default {
61 | title: 'Selectable/Pre Disabled',
62 | component: PreDisabled,
63 | parameters: {
64 | docs: {
65 | page: doc,
66 | },
67 | },
68 | };
69 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/preSelected.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Pre Selected Rows
4 |
5 | To pre-select rows based on your data:
6 |
7 | ```js
8 | ...
9 | const rowSelectCritera = row => row.fat > 6;
10 |
11 | function MyComponent() {
12 | return (
13 |
19 | );
20 | }
21 | ```
22 |
23 |
26 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/preSelected.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './preSelected.mdx';
3 | import DataTable from '../../../src/index';
4 | import data from '../../constants/sampleDesserts';
5 |
6 | const columns = [
7 | {
8 | name: 'Name',
9 | selector: row => row.name,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Type',
14 | selector: row => row.type,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Calories (g)',
19 | selector: row => row.calories,
20 | sortable: true,
21 | right: true,
22 | },
23 | {
24 | name: 'Fat (g)',
25 | selector: row => row.fat,
26 | sortable: true,
27 | right: true,
28 | },
29 | {
30 | name: 'Carbs (g)',
31 | selector: row => row.carbs,
32 | sortable: true,
33 | right: true,
34 | },
35 | ];
36 |
37 | const rowSelectCritera = row => row.fat > 6;
38 |
39 | export const PreSelected = () => (
40 |
48 | );
49 |
50 | export default {
51 | title: 'Selectable/Pre Selected',
52 | component: PreSelected,
53 | parameters: {
54 | docs: {
55 | page: doc,
56 | },
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/rowMGMT.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Managing Row Selections
4 |
5 | Managing row selection with RDT is easy! We'll need to to a few things:
6 |
7 | 1. Manage our selected rows state
8 | 2. Toggle all row selection when an action is completed
9 |
10 |
11 | # Clearing Row Selections
12 |
13 | We need some hook to trigger all the selected rows to clear. If you were building your own table component, you would manage the selected rows state in some parent component, however, in our case since we to keep row management within React Data Table `clearSelectedRows` prop is provided so you can pass a toggled state.
14 |
15 | It will be up to you to make sure you do not pass the same state twice. For example, if you set `clearSelectedRows={true}` twice, on the second update/trigger, none the rows will not be cleared, so you will need to toggle the state.
16 |
17 | ```js
18 | function MyComponent() {
19 | const [selectedRows, setSelectedRows] = React.useState(false);
20 | const [toggledClearRows, setToggleClearRows] = React.useState(false);
21 |
22 | const handleChange = ({ selectedRows }) => {
23 | setSelectedRows(selectedRows);
24 | };
25 |
26 | // Toggle the state so React Data Table changes to clearSelectedRows are triggered
27 | const handleClearRows = () => {
28 | setToggleClearRows(!toggledClearRows);
29 | }
30 |
31 | return (
32 | <>
33 |
36 |
44 |
45 | );
46 | };
47 | ```
48 |
49 | # Row Selections Delete Use Case
50 |
51 | Let's put these concepts together into a real world example. The following example allows you to manage deleting rows using `selectableRows`, `onSelectedRowsChange` and `clearSelectedRows`:
52 |
53 |
--------------------------------------------------------------------------------
/stories/DataTable/selectableRows/rowMGMT.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './rowMGMT.mdx';
3 | import differenceBy from 'lodash/differenceBy';
4 | import Button from '../../shared/Button';
5 | import tableDataItems from '../../constants/sampleMovieData';
6 | import DataTable from '../../../src/index';
7 |
8 | const columns = [
9 | {
10 | name: 'Title',
11 | selector: row => row.title,
12 | sortable: true,
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Year',
21 | selector: row => row.year,
22 | sortable: true,
23 | },
24 | ];
25 |
26 | export const ManageSelections = () => {
27 | const [selectedRows, setSelectedRows] = React.useState([]);
28 | const [toggleCleared, setToggleCleared] = React.useState(false);
29 | const [data, setData] = React.useState(tableDataItems);
30 |
31 | const handleRowSelected = React.useCallback(state => {
32 | setSelectedRows(state.selectedRows);
33 | }, []);
34 |
35 | const contextActions = React.useMemo(() => {
36 | const handleDelete = () => {
37 | // eslint-disable-next-line no-alert
38 | if (window.confirm(`Are you sure you want to delete:\r ${selectedRows.map(r => r.title)}?`)) {
39 | setToggleCleared(!toggleCleared);
40 | setData(differenceBy(data, selectedRows, 'title'));
41 | }
42 | };
43 |
44 | return (
45 |
48 | );
49 | }, [data, selectedRows, toggleCleared]);
50 |
51 | return (
52 |
62 | );
63 | };
64 |
65 | export default {
66 | title: 'Selectable/Manage Selections',
67 | component: ManageSelections,
68 | parameters: {
69 | docs: {
70 | page: doc,
71 | },
72 | },
73 | };
74 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/basic.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Sorting
4 |
5 | Enabling Sorting in React Data Table is easy. Simply add the `sortable` prop to any column definition you want to be sortable. Also make sure a `selector` has been defined.
6 |
7 | ```js
8 | const columns = [
9 | {
10 | name: 'Title',
11 | selector: row => row.title,
12 | sortable: true,
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | },
19 | {
20 | name: 'Year',
21 | selector: row => row.year,
22 | sortable: true,
23 | },
24 | ];
25 | ```
26 |
27 |
30 |
31 | # Default Sort Field
32 |
33 | To load your table with a pre sorted column specify the `defaultSortFieldId`. The `defaultSortFieldId` will correspond to the order of your columns starting at the number 1:
34 |
35 | ```js
36 | const columns = [
37 |
38 | ```
39 |
40 | You can also specify your own column `id` as long as each column definition `id` is unique.
41 |
42 |
45 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/basic.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './basic.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const columns = [
7 | {
8 | name: 'Title',
9 | selector: row => row.title,
10 | sortable: true,
11 | },
12 | {
13 | name: 'Director',
14 | selector: row => row.director,
15 | sortable: true,
16 | },
17 | {
18 | name: 'Year',
19 | selector: row => row.year,
20 | sortable: true,
21 | },
22 | ];
23 |
24 | export const Basic = () => {
25 | return ;
26 | };
27 |
28 | export default {
29 | title: 'Sorting/Basic',
30 | component: Basic,
31 | parameters: {
32 | docs: {
33 | page: doc,
34 | },
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/remote.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Remote Sorting
4 |
5 | Remote/Server-side sorting via `sortServer` disables the internal sorting. It will be up to you to implement your own sort logic. A common use case is if you want to use remote sorting via an external API.
6 |
7 | If you just want to replace the internal sort logic you should use [sortFunction](/docs/sorting-custom-sort--custom-sort).
8 |
9 | For remote sorting you'll also want to set the `column` `sortField` to a value required by your API for that field.
10 |
11 | ```js
12 | const columns = [
13 | {
14 | name: 'Title',
15 | selector: row => row.title,
16 | sortable: true,
17 | sortField: 'title',
18 | },
19 | {
20 | name: 'Director',
21 | selector: row => row.director,
22 | sortable: true,
23 | sortField: 'director',
24 | },
25 | {
26 | name: 'Year',
27 | selector: row => row.year,
28 | sortable: true,
29 | sortField: 'year',
30 | },
31 | ];
32 |
33 | function MyComponent() {
34 | const [items, setData] = useState(data);
35 |
36 | const handleSort = async (column, sortDirection) => {
37 | /// reach out to some API and get new data using or sortField and sortDirection
38 | // e.g. https://api.github.com/search/repositories?q=blog&sort=${column.sortField}&order=${sortDirection}
39 |
40 | setData(remoteData);
41 | };
42 |
43 | return (
44 |
50 | );
51 | }
52 | ```
53 |
54 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/remote.stories.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import doc from './remote.mdx';
3 | import { orderBy } from 'lodash';
4 | import initData from '../../constants/sampleMovieData';
5 | import DataTable from '../../../src/index';
6 |
7 | const columns = [
8 | {
9 | name: 'Title',
10 | selector: row => row.title,
11 | sortable: true,
12 | sortField: 'title',
13 | },
14 | {
15 | name: 'Director',
16 | selector: row => row.director,
17 | sortable: true,
18 | sortField: 'director',
19 | },
20 | {
21 | name: 'Year',
22 | selector: row => row.year,
23 | sortable: true,
24 | sortField: 'year',
25 | },
26 | ];
27 |
28 | export const RemoteSort = () => {
29 | const [loading, setLoading] = useState(false);
30 | const [data, setData] = useState(initData);
31 |
32 | const handleSort = (column, sortDirection) => {
33 | // simulate server sort
34 | console.log(column, sortDirection);
35 | setLoading(true);
36 |
37 | // instead of setTimeout this is where you would handle your API call.
38 | setTimeout(() => {
39 | setData(orderBy(data, column.sortField, sortDirection));
40 | setLoading(false);
41 | }, 100);
42 | };
43 |
44 | return (
45 |
55 | );
56 | };
57 |
58 | export default {
59 | title: 'Sorting/Remote Sort',
60 | component: RemoteSort,
61 | parameters: {
62 | docs: {
63 | page: doc,
64 | },
65 | },
66 | };
67 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/sortFunction.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Custom Sorting - sortFunction
4 |
5 | By default RDT uses `Array.sort`, however, if you wish to override the internal sorting you can instead pass in your own sorting function into the `sortFunction` property. The callback signature will give you access to RDT's internal sorting properties. Here is an example using plain old `Array.sort`;
6 |
7 | - `rows` your data rows
8 | - `selector` is the function you defined on your column.selector. We're going to call this function and pass in the row data in the example below.
9 | - `direction` RDT's current sorting position.
10 |
11 | ```js
12 | const customSort = (rows, selector, direction) => {
13 | return rows.sort((rowA, rowB) => {
14 | // use the selector function to resolve your field names by passing the sort comparitors
15 | const aField = selector(rowA)
16 | const bField = selector(rowB)
17 |
18 | let comparison = 0;
19 |
20 | if (aField > bField) {
21 | comparison = 1;
22 | } else if (aField < bField) {
23 | comparison = -1;
24 | }
25 |
26 | return direction === 'desc' ? comparison * -1 : comparison;
27 | });
28 | };
29 |
30 | ...
31 |
32 | ```
33 |
34 | Or maybe you prefer to use something like lodash orderBy:
35 |
36 | ```js
37 | const customSort = (rows, selector, direction) => {
38 | return orderBy(rows, selector, direction);
39 | };
40 |
41 | ...
42 |
43 | ```
44 |
45 |
48 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/sortFunction.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './sortFunction.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const customSort = (rows, selector, direction) => {
7 | return rows.sort((a, b) => {
8 | // use the selector to resolve your field names by passing the sort comparators
9 | const aField = selector(a).toLowerCase();
10 | const bField = selector(b).toLowerCase();
11 |
12 | let comparison = 0;
13 |
14 | if (aField > bField) {
15 | comparison = 1;
16 | } else if (aField < bField) {
17 | comparison = -1;
18 | }
19 |
20 | return direction === 'desc' ? comparison * -1 : comparison;
21 | });
22 | };
23 |
24 | const columns = [
25 | {
26 | name: 'Title',
27 | selector: row => row.title,
28 | sortable: true,
29 | },
30 | {
31 | name: 'Director',
32 | selector: row => row.director,
33 | sortable: true,
34 | },
35 | {
36 | name: 'Year',
37 | selector: row => row.year,
38 | sortable: true,
39 | },
40 | ];
41 |
42 | export const CustomSort = () => {
43 | return ;
44 | };
45 |
46 | export default {
47 | title: 'Sorting/Custom Sort',
48 | component: CustomSort,
49 | parameters: {
50 | docs: {
51 | page: doc,
52 | },
53 | },
54 | };
55 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/sortFunctionCol.mdx:
--------------------------------------------------------------------------------
1 | import { Story, Canvas } from '@storybook/addon-docs';
2 |
3 | # Custom Sorting Individual Columns - sortFunction
4 |
5 | If you only need to override the sorting behavior for a specific column(s). In this case, the custom sorting function takes only provides you access to two arguments, rowA and rowB.
6 |
7 | ```js
8 | const caseInsensitiveSort = (rowA, rowB) => {
9 | const a = rowA.title.toLowerCase();
10 | const b = rowB.title.toLowerCase();
11 |
12 | if (a > b) {
13 | return 1;
14 | }
15 |
16 | if (b > a) {
17 | return -1;
18 | }
19 |
20 | return 0;
21 | };
22 |
23 | const columns = [
24 | {
25 | name: 'Quantity',
26 | selector: 'quantity',
27 | sortable: true,
28 | sortFunction: caseInsensitiveSort
29 | }
30 | ];
31 |
32 | ...
33 |
34 | ```
35 |
36 |
39 |
--------------------------------------------------------------------------------
/stories/DataTable/sorting/sortFunctionCol.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import doc from './sortFunctionCol.mdx';
3 | import data from '../../constants/sampleMovieData';
4 | import DataTable from '../../../src/index';
5 |
6 | const caseInsensitiveSort = (rowA, rowB) => {
7 | const a = rowA.title.toLowerCase();
8 | const b = rowB.title.toLowerCase();
9 |
10 | if (a > b) {
11 | return 1;
12 | }
13 |
14 | if (b > a) {
15 | return -1;
16 | }
17 |
18 | return 0;
19 | };
20 |
21 | const columns = [
22 | {
23 | name: 'Title',
24 | selector: row => row.title,
25 | sortable: true,
26 | sortFunction: caseInsensitiveSort,
27 | },
28 | {
29 | name: 'Director',
30 | selector: row => row.director,
31 | sortable: true,
32 | },
33 | {
34 | name: 'Year',
35 | selector: row => row.year,
36 | sortable: true,
37 | },
38 | ];
39 |
40 | export const CustomColumnSort = () => {
41 | return ;
42 | };
43 |
44 | export default {
45 | title: 'Sorting/Custom Column Sort',
46 | component: CustomColumnSort,
47 | parameters: {
48 | docs: {
49 | page: doc,
50 | },
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/stories/coc.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Contributor Covenant Code of Conduct
6 |
7 | ## Our Pledge
8 |
9 | In the interest of fostering an open and welcoming environment, we as
10 | contributors and maintainers pledge to making participation in our project and
11 | our community a harassment-free experience for everyone, regardless of age, body
12 | size, disability, ethnicity, gender identity and expression, level of experience,
13 | nationality, personal appearance, race, religion, or sexual identity and
14 | orientation.
15 |
16 | ## Our Standards
17 |
18 | Examples of behavior that contributes to creating a positive environment
19 | include:
20 |
21 | - Using welcoming and inclusive language
22 | - Being respectful of differing viewpoints and experiences
23 | - Gracefully accepting constructive criticism
24 | - Focusing on what is best for the community
25 | - Showing empathy towards other community members
26 |
27 | Examples of unacceptable behavior by participants include:
28 |
29 | - The use of sexualized language or imagery and unwelcome sexual attention or
30 | advances
31 | - Trolling, insulting/derogatory comments, and personal or political attacks
32 | - Public or private harassment
33 | - Publishing others' private information, such as a physical or electronic
34 | address, without explicit permission
35 | - Other conduct which could reasonably be considered inappropriate in a
36 | professional setting
37 |
38 | ## Our Responsibilities
39 |
40 | Project maintainers are responsible for clarifying the standards of acceptable
41 | behavior and are expected to take appropriate and fair corrective action in
42 | response to any instances of unacceptable behavior.
43 |
44 | Project maintainers have the right and responsibility to remove, edit, or
45 | reject comments, commits, code, wiki edits, issues, and other contributions
46 | that are not aligned to this Code of Conduct, or to ban temporarily or
47 | permanently any contributor for other behaviors that they deem inappropriate,
48 | threatening, offensive, or harmful.
49 |
50 | ## Scope
51 |
52 | This Code of Conduct applies both within project spaces and in public spaces
53 | when an individual is representing the project or its community. Examples of
54 | representing a project or community include using an official project e-mail
55 | address, posting via an official social media account, or acting as an appointed
56 | representative at an online or offline event. Representation of a project may be
57 | further defined and clarified by project maintainers.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported by contacting the project team at johnnyazee@gmail.com. All
63 | complaints will be reviewed and investigated and will result in a response that
64 | is deemed necessary and appropriate to the circumstances. The project team is
65 | obligated to maintain confidentiality with regard to the reporter of an incident.
66 | Further details of specific enforcement policies may be posted separately.
67 |
68 | Project maintainers who do not follow or enforce the Code of Conduct in good
69 | faith may face temporary or permanent repercussions as determined by other
70 | members of the project's leadership.
71 |
72 | ## Attribution
73 |
74 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
75 | available at [http://contributor-covenant.org/version/1/4][version]
76 |
77 | [homepage]: http://contributor-covenant.org
78 | [version]: http://contributor-covenant.org/version/1/4/
79 |
--------------------------------------------------------------------------------
/stories/constants/sampleDesserts.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | id: 1,
4 | name: 'Frozen yogurt',
5 | type: 'Ice cream',
6 | calories: 159,
7 | fat: 6.0,
8 | carbs: 24,
9 | protein: 4.0,
10 | sodium: 87,
11 | calcium: 14,
12 | iron: 1,
13 | },
14 | {
15 | id: 2,
16 | name: 'Ice cream sandwhich',
17 | type: 'Ice cream',
18 | calories: 237,
19 | fat: 9.0,
20 | carbs: 37,
21 | protein: 4.3,
22 | sodium: 129,
23 | calcium: 8,
24 | iron: 1,
25 | },
26 | {
27 | id: 3,
28 | name: 'Eclair',
29 | type: 'Pastry',
30 | calories: 262,
31 | fat: 16.0,
32 | carbs: 37,
33 | protein: 6.0,
34 | sodium: 337,
35 | calcium: 6,
36 | iron: 7,
37 | },
38 | {
39 | id: 4,
40 | name: 'Cupcake',
41 | type: 'Pastry',
42 | calories: 305,
43 | fat: 3.7,
44 | carbs: 67,
45 | protein: 4.3,
46 | sodium: 413,
47 | calcium: 3,
48 | iron: 8,
49 | },
50 | {
51 | id: 5,
52 | name: 'Gingerbread',
53 | type: 'Pastry',
54 | calories: 356,
55 | fat: 16.0,
56 | carbs: 49,
57 | protein: 3.9,
58 | sodium: 327,
59 | calcium: 7,
60 | iron: 16,
61 | },
62 | {
63 | id: 6,
64 | name: 'Jelly bean',
65 | type: 'Other',
66 | calories: 375,
67 | fat: 0.0,
68 | carbs: 94,
69 | protein: 0.0,
70 | sodium: 50,
71 | calcium: 0,
72 | iron: 0,
73 | },
74 | {
75 | id: 7,
76 | name: 'Lollipop',
77 | type: 'Other',
78 | calories: 392,
79 | fat: 0.2,
80 | carbs: 98,
81 | protein: 0.0,
82 | sodium: 38,
83 | calcium: 0,
84 | iron: 2,
85 | },
86 | {
87 | id: 8,
88 | name: 'Honeycomb',
89 | type: 'Other',
90 | calories: 408,
91 | fat: 3.2,
92 | carbs: 87,
93 | protein: 6.5,
94 | sodium: 562,
95 | calcium: 0,
96 | iron: 45,
97 | },
98 | {
99 | id: 9,
100 | name: 'Donut',
101 | type: 'Pastry',
102 | calories: 52,
103 | fat: 25.0,
104 | carbs: 51,
105 | protein: 4.9,
106 | sodium: 326,
107 | calcium: 2,
108 | iron: 22,
109 | },
110 | {
111 | id: 10,
112 | name: 'KitKat',
113 | type: 'Other',
114 | calories: 16,
115 | fat: 6.0,
116 | carbs: 65,
117 | protein: 7.0,
118 | sodium: 54,
119 | calcium: 12,
120 | iron: 6,
121 | },
122 | ];
123 |
--------------------------------------------------------------------------------
/stories/cssEscape.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | ## CSS Escape Hatch
6 |
7 | If you would like to customize the layout components of React Data Table using styled-components (e.g. `styled(DataTable)`), or your favorite CSS, SCSS, LESS, etc.., pre-processor, or you simply need an escape hatch you can utilize the following classNames:
8 |
9 | - rdt_Table
10 | - rdt_TableRow
11 | - rdt_TableCol
12 | - rdt_TableCol_Sortable
13 | - rdt_TableCell
14 | - rdt_TableHeader
15 | - rdt_TableFooter
16 | - rdt_TableHead
17 | - rdt_TableHeadRow
18 | - rdt_TableBody
19 | - rdt_ExpanderRow
20 |
--------------------------------------------------------------------------------
/stories/customStyles.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Overidding Styling Using css-in-js with customStyles
6 |
7 | For more advanced use cases you can override or replace the global default styling using the `customStyles` prop and passing in your own css-in-js.
8 |
9 | **Disclaimer**: you're on your own here since you will have the power to not only customize but break RDT.
10 |
11 | Let's apply a simple `customStyles` to override the default row height and change the cell padding:
12 |
13 | ```js
14 | import DataTable from 'react-data-table-component';
15 |
16 | // Internally, customStyles will deep merges your customStyles with the default styling.
17 | const customStyles = {
18 | rows: {
19 | style: {
20 | minHeight: '72px', // override the row height
21 | },
22 | },
23 | headCells: {
24 | style: {
25 | paddingLeft: '8px', // override the cell padding for head cells
26 | paddingRight: '8px',
27 | },
28 | },
29 | cells: {
30 | style: {
31 | paddingLeft: '8px', // override the cell padding for data cells
32 | paddingRight: '8px',
33 | },
34 | },
35 | };
36 |
37 | const MyComponent = () => ;
38 | ```
39 |
40 | View [styles.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects.
41 |
--------------------------------------------------------------------------------
/stories/development.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Development
6 |
7 | ## Setup
8 |
9 | Install the latest [Node JS LTS](https://nodejs.org/) and [Yarn](https://yarnpkg.com/getting-started/install) and simply run `yarn` or `yarn install` command in the root and stories directory.
10 |
11 | > It is advised to run the script whenever NPM packages are installed.
12 |
13 | ## Local development
14 |
15 | During development:
16 |
17 | ```sh
18 | # watch and build new source changes
19 | yarn start
20 | # or serve *.stories.js files and manually test on the Storybook app
21 | yarn storybook
22 | ```
23 |
24 | ## Including NPM packages
25 |
26 | This project uses two package.json structure
27 |
28 | ### Library dependencies
29 |
30 | ```sh
31 | yarn add [package-name] --dev # for dev tools
32 | yarn add [package-name] # for app
33 | ```
34 |
35 | ## Lint
36 |
37 | ```sh
38 | yarn lint # runs linter to detect any style issues (css & js)
39 | yarn lint:css # lint only css
40 | yarn lint:js # lint only js
41 | yarn lint:js --fix # tries to fix js lint issues
42 | ```
43 |
44 | ## Test
45 |
46 | ```sh
47 | yarn test:tdd # runs functional/unit tests using Jest with watcher
48 | yarn test # runs functional/unit tests using Jest
49 | yarn test --coverage # with coverage
50 | ```
51 |
52 | ## Build
53 |
54 | ```sh
55 | yarn build # builds sources at src/
56 | ```
57 |
--------------------------------------------------------------------------------
/stories/enums.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Enumerators
6 |
7 | React Data Table provides you with enums instead of using strings for various properties. These are optional with JavaScript but required when using a TypeScript project. In any case, use the enums when you can.
8 |
9 | ## Direction
10 |
11 | - Direction.LTR = 'ltr'
12 | - Direction.RTL = 'rtl'
13 | - Direction.AUTO = 'auto'
14 |
15 | ```js
16 | import DataTable { Direction } from 'react-data-table-Component';
17 |
18 |
19 | ```
20 |
21 | ## Alignment
22 |
23 | - LEFT = 'left'
24 | - RIGHT = 'right'
25 | - CENTER = 'center'
26 |
27 | ```js
28 | import DataTable { Alignment } from 'react-data-table-Component';
29 |
30 |
31 | ```
32 |
33 | ## Media
34 |
35 | - SM = 'sm'
36 | - MD = 'md'
37 | - LG = 'lg'
38 |
39 | ```js
40 | import DataTable { Media } from 'react-data-table-Component';
41 |
42 | const columns = [
43 | {
44 | name: 'Title',
45 | selector: row => row.title,
46 | hide: Media.SM
47 | }
48 | ];
49 | ```
50 |
--------------------------------------------------------------------------------
/stories/headers/fixed.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import data from '../constants/sampleMovieData';
3 | import DataTable from '../../src/index';
4 |
5 | const columns = [
6 | {
7 | name: 'Title',
8 | selector: row => row.title,
9 | sortable: true,
10 | reorder: true,
11 | },
12 | {
13 | name: 'Director',
14 | selector: row => row.director,
15 | sortable: true,
16 | reorder: true,
17 | },
18 | {
19 | name: 'Year',
20 | selector: row => row.year,
21 | sortable: true,
22 | reorder: true,
23 | },
24 | ];
25 |
26 | const FixedHeaderStory = ({ fixedHeader, fixedHeaderScrollHeight }) => (
27 |
35 | );
36 |
37 | const Template = args => ;
38 |
39 | export const FixedHeader = Template.bind({});
40 |
41 | FixedHeader.args = {
42 | fixedHeader: true,
43 | fixedHeaderScrollHeight: '300px',
44 | };
45 |
46 | export default {
47 | title: 'Headers/Fixed Header',
48 | component: FixedHeader,
49 | };
50 |
--------------------------------------------------------------------------------
/stories/installation.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Requirements
6 |
7 | React Data Table Component requires the following be installed in your project:
8 |
9 | - React 16.8.0+
10 | - styled-components 3.2.3+ || 4.0.0+ || 5.0.0+
11 |
12 |
13 | # Installation
14 |
15 | ## If you already have styled-components installed
16 |
17 | React Data Table utilizes the wonderful `styled-components` library. If you've already installed `styled-components` there is no need to install it again as long as the version meets the requirements section above.
18 |
19 | ### npm
20 |
21 | ```sh
22 | npm install react-data-table-component
23 | ```
24 |
25 | ### yarn
26 |
27 | ```sh
28 | yarn add react-data-table-component
29 | ```
30 |
31 | ## If you DO NOT already have styled-components installed
32 |
33 | ### npm
34 |
35 | ```sh
36 | npm install react-data-table-component styled-components
37 | ```
38 |
39 | ### yarn
40 |
41 | ```sh
42 | yarn add react-data-table-component styled-components
43 | ```
--------------------------------------------------------------------------------
/stories/intro.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | [](https://app.netlify.com/sites/react-data-table-component/deploys) [](https://badge.fury.io/js/react-data-table-component) [](https://codecov.io/gh/jbetancur/react-data-table-component) [](https://opensource.org/licenses/Apache-2.0)
6 |
7 | # React Data Table Component
8 |
9 | [](https://GitHub.com/jbetancur/react-data-table-component/releases/) [](https://GitHub.com/jbetancur/react-data-table-component/stargazers/)
10 |
11 | Creating yet another React table library came out of necessity while developing a web application for a growing startup. I discovered that while there are some great table libraries out there, some required heavy customization, were missing out of the box features such as built in sorting and pagination, or required understanding the atomic structure of html tables.
12 |
13 | If you want to achieve balance with the force and want a simple but flexible table library give React Data Table Component a chance. If you require an Excel clone, then this is not the React table library you are looking for 👋
14 |
15 | # Key Features
16 |
17 | - Declarative configuration
18 | - Built-in and configurable:
19 | - Sorting
20 | - Selectable Rows
21 | - Expandable Rows
22 | - Pagination
23 | - Themeable/Customizable
24 | - Accessibility
25 | - Responsive (via x-scroll/flex)
26 |
27 | # Supporting React Data Table Component
28 |
29 | If you would like to support the project financially, visit
30 | [our campaign on OpenCollective](https://opencollective.com/react-data-table-component). Your contributions help accelerate the development of React Data Table Component!
31 |
32 |
33 | 
34 |
35 |
36 | # Interested in Contributing?
37 |
38 | 1. Read the [Code of Conduct](/docs/getting-started-coc--page)
39 | 2. Read the [Development Process](/docs/development--page)
40 | 3. Read the [Logging Issues & Features](/docs/getting-started-issues--page)
41 |
42 | # Contributors
43 |
44 |
45 | 
46 |
47 |
--------------------------------------------------------------------------------
/stories/issues.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Logging Issues
6 |
7 | **Issues or features with insufficient detail will most likely be ignored/unanswered**.
8 |
9 | I'm excited about this project and I want to help you, but my time is also valuable and I'm not a mind reader. **Please follow the issue templates and provide as much detail as possible.**
10 |
11 | For logging issues/bugs please use the [issue template](https://github.com/jbetancur/react-data-table-component/tree/master/.github/ISSUE_TEMPLATE).
12 |
13 | It's helpful to know the versions, steps to reproduce, and it's **especially nice to have a [codesandbox](https://codesandbox.io/s/react-data-table-sandbox-ccyuu)** when possible or at least your component code. The more details you provide me the faster we can get a fix as needed.
14 |
15 | While I absolutely ❤️ ❤️ ❤️ to teach React I simply do not have the bandwidth for that in this forum to help you understand how React State works, so **please keep the focus on React Data Table Component** Issues/Features.
16 |
17 | # Features
18 |
19 | When submitting a feature please make sure that you put detailed thought into the design. Please provide some use cases, examples, pros/cons and even better **start a converstaion about it**.
20 | Consult UX best practices (I tend to stick to material design principles for UX descisions).
21 |
22 | Convince me/users of this library that your awesome new feature will benefit all users of this library.
23 |
24 | # Pull Requests
25 |
26 | First off, if you are submitting a PR that's awesome! PR's are encouraged! But, just becuase you submit a PR does not mean it will be merged if it does not fit with the design or you are unresponsive to feedback.
27 |
28 | If you have an idea for a PR that is a little more complex, then it **should be a feature request first** that can perhaps be discussed prior to implementation so you don't waste your time working on a PR that may never get merged.
29 |
30 | Aside from implementation details, a lack of detailed explanation, improper linting/formatting, or missing/invalid tests will result in a PR being declined.
31 |
32 | # Housekeeping Bot
33 |
34 | Stale Issues, Features, PR's will auto self destruct (close) after 30 days...
35 |
--------------------------------------------------------------------------------
/stories/libraryIntegration.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # UI Library Integration
6 |
7 | React Data Table Component makes it easy to incorporate ui components from other libraries for overriding things like the sort icon, select checkbox.
8 |
9 | - [MaterialUI 5](https://codesandbox.io/s/react-data-table-materialui-72gdo)
10 | - [Bootstrap 5](https://codesandbox.io/s/react-data-table-sandbox-z6gtg)
11 |
--------------------------------------------------------------------------------
/stories/patterns.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Patterns
6 |
7 | ## Common DataTable Component
8 |
9 | ### JavaScript
10 |
11 | If you use React Data Table across your application and you are customizing or using custom components often you'll find you are repeating alot of code.
12 |
13 | The following pattern allows us to create a re-usable `DataTable` with our defaults baked in. In this case, we want to ensure all our tables are `dense` and have `pagination`, and finally let's override React Data Tables components with some material-ui sexiness:
14 |
15 | ```js
16 | import React from 'react';
17 | import DataTable from 'react-data-table-component';
18 | import Checkbox from '@material-ui/core/Checkbox';
19 |
20 | import ArrowDownward from '@material-ui/icons/ArrowDownward';
21 |
22 | const sortIcon = ;
23 | const selectProps = { indeterminate: isIndeterminate => isIndeterminate };
24 |
25 | function DataTableBase(props) {
26 | return (
27 |
35 | );
36 | }
37 |
38 | export default DataTableBase;
39 | ```
40 |
41 | Now, instead of importing `DataTable` you would import your custom `DataTableBase` component and pass in your `columns`, `data` or whatever other React Data Tably property is needed:
42 |
43 | ```js
44 | import React from 'react';
45 | import DataTable from '../mycomponents/DataTableBase';
46 |
47 | ...
48 |
49 | function MyComponent() {
50 | return ;
51 | }
52 |
53 | export default MyComponent;
54 | ```
55 |
56 | ### TypeScript
57 |
58 | We can do the same in TypeScript:
59 |
60 | ```ts
61 | import React from 'react';
62 | import DataTable, { TableProps } from '../../src/index';
63 | import Checkbox from '@material-ui/core/Checkbox';
64 | import ArrowDownward from '@material-ui/icons/ArrowDownward';
65 |
66 | const sortIcon = ;
67 | const selectProps = { indeterminate: (isIndeterminate: boolean) => isIndeterminate };
68 |
69 | function DataTableBase(props: TableProps): JSX.Element {
70 | return (
71 |
79 | );
80 | }
81 |
82 | export default DataTableBase;
83 | ```
84 |
85 | Usage:
86 |
87 | ```ts
88 | import React from 'react';
89 | import DataTable from '../mycomponents/DataTableBase';
90 |
91 | ...
92 |
93 | function MyComponent() {
94 | return ;
95 | }
96 |
97 | export default MyComponent;
98 | ```
99 |
--------------------------------------------------------------------------------
/stories/reporting.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Stargazers over time
6 |
7 | [](https://starchart.cc/jbetancur/react-data-table-component)
8 |
--------------------------------------------------------------------------------
/stories/shared/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 |
4 | const ButtonStyle = styled.button`
5 | background-color: #2979ff;
6 | border: none;
7 | color: white;
8 | padding: 8px 32px 8px 32px;
9 | text-align: center;
10 | text-decoration: none;
11 | display: inline-block;
12 | font-size: 16px;
13 | border-radius: 3px;
14 |
15 | &:hover {
16 | cursor: pointer;
17 | }
18 | `;
19 |
20 | // eslint-disable-next-line react/prop-types
21 | export default ({ children, ...rest }) => {children};
22 |
--------------------------------------------------------------------------------
/stories/shared/CustomMaterialMenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import IconButton from '@material-ui/core/IconButton';
3 | import Menu from '@material-ui/core/Menu';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import MoreVertIcon from '@material-ui/icons/MoreVert';
7 | import DeleteIcon from '@material-ui/icons/Delete';
8 | import Divider from '@material-ui/core/Divider';
9 | import Typography from '@material-ui/core/Typography';
10 |
11 | // eslint-disable-next-line react/prop-types
12 | export default ({ row, onDeleteRow, size }) => {
13 | const [anchorEl, setAnchorEl] = React.useState(null);
14 |
15 | const handleClick = event => {
16 | setAnchorEl(event.currentTarget);
17 | };
18 |
19 | const handleClose = () => {
20 | setAnchorEl(null);
21 | };
22 | const deleteRow = () => {
23 | if (onDeleteRow) {
24 | onDeleteRow(row);
25 | }
26 | };
27 |
28 | return (
29 |
30 |
31 |
32 |
33 |
62 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/stories/shared/users.js:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker';
2 |
3 | const createUser = () => ({
4 | id: faker.string.uuid(),
5 | name: faker.internet.userName(),
6 | email: faker.internet.email(),
7 | address: faker.location.streetAddress(),
8 | bio: faker.lorem.sentence(),
9 | image: faker.image.avatar(),
10 | });
11 |
12 | const createUsers = (numUsers = 5) => new Array(numUsers).fill(undefined).map(createUser);
13 |
14 | export default createUsers(20);
15 |
--------------------------------------------------------------------------------
/stories/simpleExamples.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | ## Basic
6 |
7 | Creating a React Data Table should be easy. Simply define your columns and data arrays:
8 |
9 | ```js
10 | import DataTable from 'react-data-table-component';
11 |
12 | const columns = [
13 | {
14 | name: 'Title',
15 | selector: row => row.title,
16 | },
17 | {
18 | name: 'Year',
19 | selector: row => row.year,
20 | },
21 | ];
22 |
23 | const data = [
24 | {
25 | id: 1,
26 | title: 'Beetlejuice',
27 | year: '1988',
28 | },
29 | {
30 | id: 2,
31 | title: 'Ghostbusters',
32 | year: '1984',
33 | },
34 | ]
35 |
36 | function MyComponent() {
37 | return (
38 |
42 | );
43 | };
44 | ```
45 |
46 | ## Basic Sorting
47 |
48 | Adding sorting a table has never been easier:
49 |
50 | ```js
51 | import DataTable from 'react-data-table-component';
52 |
53 | const columns = [
54 | {
55 | name: 'Title',
56 | selector: row => row.title,
57 | sortable: true,
58 | },
59 | {
60 | name: 'Year',
61 | selector: row => row.year,
62 | sortable: true,
63 | },
64 | ];
65 |
66 | const data = [
67 | {
68 | id: 1,
69 | title: 'Beetlejuice',
70 | year: '1988',
71 | },
72 | {
73 | id: 2,
74 | title: 'Ghostbusters',
75 | year: '1984',
76 | },
77 | ]
78 |
79 | function MyComponent() {
80 | return (
81 |
85 | );
86 | };
87 | ```
88 |
89 | ## Selectable Rows
90 |
91 | Adding selectable rows is usually quite a bit of code. Let's simplify:
92 |
93 | ```js
94 | import DataTable from 'react-data-table-component';
95 |
96 | const columns = [
97 | {
98 | name: 'Title',
99 | selector: row => row.title,
100 | },
101 | {
102 | name: 'Year',
103 | selector: row => row.year,
104 | },
105 | ];
106 |
107 | const data = [
108 | {
109 | id: 1,
110 | title: 'Beetlejuice',
111 | year: '1988',
112 | },
113 | {
114 | id: 2,
115 | title: 'Ghostbusters',
116 | year: '1984',
117 | },
118 | ]
119 |
120 | function MyComponent() {
121 | return (
122 |
127 | );
128 | };
129 | ```
130 |
131 | ## Expandable Rows
132 |
133 | Adding expandable rows is no easy feat. Let's simplify:
134 |
135 | ```js
136 | import DataTable from 'react-data-table-component';
137 |
138 | // A super simple expandable component.
139 | const ExpandedComponent = ({ data }) => {JSON.stringify(data, null, 2)};
140 |
141 | const columns = [
142 | {
143 | name: 'Title',
144 | selector: row => row.title,
145 | },
146 | {
147 | name: 'Year',
148 | selector: row => row.year,
149 | },
150 | ];
151 |
152 | const data = [
153 | {
154 | id: 1,
155 | title: 'Beetlejuice',
156 | year: '1988',
157 | },
158 | {
159 | id: 2,
160 | title: 'Ghostbusters',
161 | year: '1984',
162 | },
163 | ]
164 |
165 | function MyComponent() {
166 | return (
167 |
173 | );
174 | };
175 | ```
176 |
--------------------------------------------------------------------------------
/stories/theming.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # Defining Your Own Theme
6 |
7 | By default RDT comes with a `light` and `dark` theme that can be set on the `theme` property, however, you can create your very own theme using the `createTheme` helper or tweak the existing built in `light` and `dark` themes.
8 |
9 | Refer to [themes.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.ts) for properties you can use to create your own color theme.
10 |
11 | # Custom Solarized Theme
12 |
13 | Let's create a `solarized` theme that inherits from the build in `dark` theme:
14 |
15 | ```js
16 | import DataTable, { createTheme } from 'react-data-table-component';
17 |
18 | // createTheme creates a new theme named solarized that overrides the build in dark theme
19 | createTheme('solarized', {
20 | text: {
21 | primary: '#268bd2',
22 | secondary: '#2aa198',
23 | },
24 | background: {
25 | default: '#002b36',
26 | },
27 | context: {
28 | background: '#cb4b16',
29 | text: '#FFFFFF',
30 | },
31 | divider: {
32 | default: '#073642',
33 | },
34 | action: {
35 | button: 'rgba(0,0,0,.54)',
36 | hover: 'rgba(0,0,0,.08)',
37 | disabled: 'rgba(0,0,0,.12)',
38 | },
39 | }, 'dark');
40 |
41 | const MyComponent = () => (
42 |
47 | );
48 | ```
49 |
50 | ## Tweaking the built in light and dark themes
51 |
52 | You can also take an existing theme and tweak the colors without much effort:
53 |
54 | ```js
55 | import DataTable, { createTheme } from 'react-data-table-component';
56 |
57 | // createTheme creates a new theme named solarized that overrides the build in dark theme
58 | createTheme('dark', {
59 | background: {
60 | default: 'transparent',
61 | },
62 | });
63 |
64 | const MyComponent = () => (
65 |
70 | );
71 | ```
72 |
73 | Once you've created your theme it will now be available to all DataTables across your project so you may want to define your custom themes in seperate files.
74 |
--------------------------------------------------------------------------------
/stories/typescript.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from '@storybook/addon-docs';
2 |
3 |
4 |
5 | # TypeScript
6 |
7 | React Data Table is built with TypeScript so typings are buit in. First, we'll need to define our data type (or interface):
8 |
9 | ```ts
10 | import DataTable, { TableColumn } from 'react-data-table-component';
11 |
12 | interface DataRow {
13 | title: string;
14 | director: string;
15 | year: string;
16 | }
17 | ```
18 |
19 | Alternatively, if you want to define `DataRow` as a type:
20 |
21 | ```ts
22 | import DataTable, { TableColumn } from 'react-data-table-component';
23 |
24 | type DataRow = {
25 | title: string;
26 | director: string;
27 | year: string;
28 | };
29 | ```
30 |
31 | Next, we'll create our columns definitions. `TableColumn` is an interface representing a column definition.
32 | `TableColumn` takes a generic parameter ``. By passing `TableColumn[]` (columns is an array) we now have access to our `dataRow` props on any property in our table `columns` that accesses our data:
33 |
34 | ```ts
35 | const columns: TableColumn[] = [
36 | {
37 | name: 'Title',
38 | selector: row => row.title,
39 | },
40 | {
41 | name: 'Director',
42 | selector: row => row.director,
43 | },
44 | {
45 | name: 'Year',
46 | selector: row => row.year,
47 | },
48 | ];
49 | ```
50 |
51 | Finally, we'll implement our TypeScript component that uses `DataTable`:
52 |
53 | ```ts
54 | function MyComponent(): JSX.Element {
55 | return ;
56 | }
57 | ```
58 |
59 | Or, if you prefer using `React.FC`:
60 |
61 | ```ts
62 | const MyComponent: React.FC = () => {
63 | return ;
64 | };
65 | ```
66 |
67 | Putting it all together:
68 |
69 | ```ts
70 | import DataTable, { TableColumn } from 'react-data-table-component';
71 |
72 | interface DataRow {
73 | title: string;
74 | director: string;
75 | year: string;
76 | }
77 |
78 | const columns: TableColumn[] = [
79 | {
80 | name: 'Title',
81 | selector: row => row.title,
82 | },
83 | {
84 | name: 'Director',
85 | selector: row => row.director,
86 | },
87 | {
88 | name: 'Year',
89 | selector: row => row.year,
90 | },
91 | ];
92 |
93 | function MyComponent(): JSX.Element {
94 | return ;
95 | }
96 |
97 | export default MyComponent;
98 | ```
99 |
100 | ## Types
101 |
102 | In addition to `TableColumn` we can also access various other React Data Table types.
103 |
104 | The following are going to be the most commonly used and accept a generic `T` parameter, which will always be your data's type or interface:
105 |
106 | - `TableColumn`
107 | - `TableProps`
108 | - `ConditionalStyles`
109 | - `ExpanderComponentProps`
110 | - `PaginationComponentProps`
111 |
112 | The following types are available for advanced or niche use cases:
113 |
114 | - `TableRow`
115 | - `TableStyles`
116 | - `Theme`
117 | - `Themes`
118 | - `PaginationOptions`
119 | - `PaginationServerOptions`
120 | - `ContextMessage`
121 | - `SortOrder`
122 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "esModuleInterop": true,
5 | "experimentalDecorators": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "noEmit": true,
9 | "noImplicitReturns": true,
10 | "noUnusedLocals": true,
11 | "removeComments": true,
12 | "resolveJsonModule": true,
13 | "skipLibCheck": true,
14 | "strict": true,
15 | "sourceMap": true,
16 | "baseUrl": "src",
17 | "jsx": "react",
18 | "moduleResolution": "node",
19 | "outDir": "dist",
20 | "target": "es6",
21 | "module": "esnext",
22 | "lib": [
23 | "es6",
24 | "es7",
25 | "dom"
26 | ],
27 | "declaration": true
28 | },
29 | "include": [
30 | "src/**/*"
31 | ],
32 | "exclude": [
33 | "node_modules",
34 | "dist",
35 | "src/**/__tests__",
36 | "src/**/internal"
37 | ]
38 | }
39 |
--------------------------------------------------------------------------------