1import React from 'react';
2import data from '../constants/sampleMovieData';
3import DataTable, { createTheme } from '../../src/index';
4
5// createTheme creates a new theme named solarized that overrides the build in dark theme
6createTheme(
7	'solarized',
8	{
9		text: {
10			primary: '#268bd2',
11			secondary: '#2aa198',
12		},
13		background: {
14			default: '#002b36',
15		},
16		context: {
17			background: '#cb4b16',
18			text: '#FFFFFF',
19		},
20		divider: {
21			default: '#073642',
22		},
23		button: {
24			default: '#2aa198',
25			hover: 'rgba(0,0,0,.08)',
26			focus: 'rgba(255,255,255,.12)',
27			disabled: 'rgba(255, 255, 255, .34)',
28		},
29		sortFocus: {
30			default: '#2aa198',
31		},
32	},
33	'dark',
34);
35
36const columns = [
37	{
38		name: 'Title',
39		selector: row => row.title,
40		sortable: true,
41	},
42	{
43		name: 'Director',
44		selector: row => row.director,
45		sortable: true,
46	},
47	{
48		name: 'Year',
49		selector: row => row.year,
50		sortable: true,
51	},
52];
53
54export const Custom = () => (
55	<DataTable title="Solarized Movie List" columns={columns} data={data} theme="solarized" selectableRows pagination />
56);
57
58export default {
59	title: 'Theming/Custom ',
60	component: Custom,
61};