1import React from 'react';
2import data from '../constants/sampleMovieData';
3import DataTable, { defaultThemes } from '../../src/index';
4
5const customStyles = {
6	header: {
7		style: {
8			minHeight: '56px',
9		},
10	},
11	headRow: {
12		style: {
13			borderTopStyle: 'solid',
14			borderTopWidth: '1px',
15			borderTopColor: defaultThemes.default.divider.default,
16		},
17	},
18	headCells: {
19		style: {
20			'&:not(:last-of-type)': {
21				borderRightStyle: 'solid',
22				borderRightWidth: '1px',
23				borderRightColor: defaultThemes.default.divider.default,
24			},
25		},
26	},
27	cells: {
28		style: {
29			'&:not(:last-of-type)': {
30				borderRightStyle: 'solid',
31				borderRightWidth: '1px',
32				borderRightColor: defaultThemes.default.divider.default,
33			},
34		},
35	},
36};
37
38const columns = [
39	{
40		name: 'Title',
41		selector: row => row.title,
42		sortable: true,
43	},
44	{
45		name: 'Director',
46		selector: row => row.director,
47		sortable: true,
48	},
49	{
50		name: 'Year',
51		selector: row => row.year,
52		sortable: true,
53	},
54];
55
56export const CompactGrid = () => (
57	<DataTable
58		title="Movie List"
59		columns={columns}
60		data={data}
61		customStyles={customStyles}
62		pagination
63		selectableRows
64		dense
65	/>
66);
67
68export default {
69	title: 'Custom Styles/Compact Grid',
70};