Patterns

Common DataTable Component

JavaScript

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.

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:

import React from 'react';
import DataTable from 'react-data-table-component';
import Checkbox from '@material-ui/core/Checkbox';

import ArrowDownward from '@material-ui/icons/ArrowDownward';

const sortIcon = <ArrowDownward />;
const selectProps = { indeterminate: isIndeterminate => isIndeterminate };

function DataTableBase(props) {
    return (
        <DataTable
            pagination
            selectableRowsComponent={Checkbox}
            selectableRowsComponentProps={selectProps}
            sortIcon={sortIcon}
            dense
            {...props}
        />
    );
}

export default DataTableBase;
Copy

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:

import React from 'react';
import DataTable from '../mycomponents/DataTableBase';

...

function MyComponent() {
    return <DataTable columns={columns} data={data} selectableRows />;
}

export default MyComponent;
Copy

TypeScript

We can do the same in TypeScript:

import React from 'react';
import DataTable, { TableProps } from '../../src/index';
import Checkbox from '@material-ui/core/Checkbox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';

const sortIcon = <ArrowDownward />;
const selectProps = { indeterminate: (isIndeterminate: boolean) => isIndeterminate };

function DataTableBase<T>(props: TableProps<T>): JSX.Element {
    return (
        <DataTable
            pagination
            selectableRowsComponent={Checkbox}
            selectableRowsComponentProps={selectProps}
            sortIcon={sortIcon}
            dense
            {...props}
        />
    );
}

export default DataTableBase;
Copy

Usage:

import React from 'react';
import DataTable from '../mycomponents/DataTableBase';

...

function MyComponent() {
    return <DataTable columns={columns} data={data} selectableRows />;
}

export default MyComponent;
Copy