lucid-ui
Version:
A UI component library from Xandr.
903 lines • 41 kB
JavaScript
import { every, map, reverse, sortBy } from 'lodash';
import React from 'react';
import createReactClass from 'create-react-class';
import { createClass } from '../../util/component-types';
import SuccessIcon from '../Icon/SuccessIcon/SuccessIcon';
import DataTable from './DataTable';
import TextField from '../TextField/TextField';
import CheckboxLabeled from '../CheckboxLabeled/CheckboxLabeled';
export default {
title: 'Table/DataTable',
component: DataTable,
parameters: {
docs: {
description: {
component: DataTable.peek.description,
},
},
},
args: DataTable.defaultProps,
};
function addKeys(children) {
return map(children, (child, index) => ({ ...child, key: index }));
}
const Template = (args) => React.createElement(DataTable, { ...args });
const defaultColumns = addKeys([
React.createElement(DataTable.Column, { field: 'id', align: 'left', key: 1 }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100, key: 2 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, key: 3 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left', key: 4 }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, key: 5 }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, key: 6 }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, key: 7 }, "Status"),
]);
const defaultData = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
];
export const Basic = Template.bind({});
Basic.args = {
children: defaultColumns,
data: defaultData,
};
export const ColumnGroups = Template.bind({});
ColumnGroups.args = {
density: 'extended',
children: addKeys([
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.ColumnGroup, { title: 'Name' },
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, key: 'first_name' }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isSortable: true, key: 'last_name' }, "Last")),
React.createElement(DataTable.Column, { field: 'email', align: 'left' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"),
]),
data: defaultData,
};
export const SelectableAndNavigableRows = Template.bind({});
SelectableAndNavigableRows.args = {
density: 'extended',
isSelectable: true,
isActionable: true,
children: addKeys([
React.createElement(DataTable.Column, { field: 'id', align: 'left', hasBorderLeft: true }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100, hasBorderLeft: true, isSortable: true }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isSortable: true }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"),
]),
data: defaultData,
};
export const DisabledRows = Template.bind({});
DisabledRows.args = {
children: defaultColumns,
data: map(defaultData, (row, index) => ({
...row,
isDisabled: !!(index % 2),
})),
};
export const Empty = Template.bind({});
Empty.args = {
isFullWidth: true,
density: 'extended',
children: addKeys([
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation"),
]),
data: [],
};
/* Interactive Table */
export const InteractiveTable = (args) => {
const Component = createReactClass({
getInitialState() {
return {
activeIndex: 1,
currentlySortedField: 'id',
currentlySortedFieldDirection: 'down',
data: [
{
id: '01',
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
isSelected: true,
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: '02',
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
},
{
id: '03',
first_name: (React.createElement("div", null,
"Leon ",
React.createElement("div", { className: 'child' }, "The Silly"))),
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
},
{
id: '04',
first_name: 'Aristotle',
last_name: '--',
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: '05',
first_name: 'Galileo',
last_name: 'Galilei',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: '06',
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: '07',
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: '08',
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: '09',
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: '10',
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
],
};
},
handleSelect(_item, selectedIndex) {
const { data } = this.state;
this.setState({
data: map(data, (row, rowIndex) => {
if (rowIndex === selectedIndex) {
return {
...row,
isSelected: !row.isSelected,
};
}
else {
return row;
}
}),
});
},
handleSelectAll() {
const { data } = this.state;
const allSelected = every(data, 'isSelected');
this.setState({
data: map(data, (row) => {
return {
...row,
isSelected: !allSelected,
};
}),
});
},
handleRowClick(_item, rowIndex) {
this.setState({
activeIndex: rowIndex,
});
},
handleSort(field) {
const { currentlySortedField, currentlySortedFieldDirection, data } = this.state;
const nextCurrentlySortedFieldDirection = currentlySortedField === field && currentlySortedFieldDirection === 'up'
? 'down'
: 'up';
const nextData = sortBy(data, field);
this.setState({
currentlySortedField: field,
currentlySortedFieldDirection: nextCurrentlySortedFieldDirection,
data: nextCurrentlySortedFieldDirection === 'down'
? nextData
: reverse(nextData),
activeIndex: null,
});
},
render() {
const { activeIndex, data, currentlySortedField, currentlySortedFieldDirection, } = this.state;
return (React.createElement("div", null,
React.createElement("style", null, '.child { display: none; } .lucid-Table-Tr:hover .child { display: block; }'),
React.createElement(DataTable, { ...args, data: map(data, (row, index) => index === activeIndex ? { ...row, isActive: true } : row), density: 'extended', isSelectable: true, isActionable: true, onRowClick: this.handleRowClick, onSelect: this.handleSelect, onSelectAll: this.handleSelectAll, onSort: this.handleSort },
React.createElement(DataTable.Column, { field: 'id', width: 41, align: 'left', hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'id', sortDirection: currentlySortedFieldDirection }, "ID"),
React.createElement(DataTable.Column, { className: 'parent', field: 'first_name', width: 100, hasBorderLeft: true, hasBorderRight: true, isResizable: true, isSortable: true, isSorted: currentlySortedField === 'first_name', sortDirection: currentlySortedFieldDirection }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isResizable: true, isSortable: true, isSorted: currentlySortedField === 'last_name', sortDirection: currentlySortedFieldDirection }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left', isSortable: true, isSorted: currentlySortedField === 'email', sortDirection: currentlySortedFieldDirection }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'occupation', sortDirection: currentlySortedFieldDirection }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'salary', sortDirection: currentlySortedFieldDirection }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"))));
},
});
return React.createElement(Component, null);
};
/* Empty With Custom Title And Body */
export const EmptyWithCustomTitleAndBody = (args) => {
const { EmptyStateWrapper, EmptyStateWrapper: { Title, Body }, } = DataTable;
const Component = createClass({
getInitialState() {
return {
data: [],
};
},
render() {
const { data } = this.state;
return (React.createElement(DataTable, { ...args, data: data, density: 'extended', isFullWidth: true, minRows: 15 },
React.createElement(EmptyStateWrapper, null,
React.createElement(Title, null, "Something went wrong."),
React.createElement(Body, { style: { fontSize: '12px' } }, "Echo park poutine esse tempor squid do. Lo-fi ramps XOXO chicharrones laboris, portland fugiat locavore. Fap four dollar toast keytar, cronut kogi fingerstache distillery microdosing everyday carry austin DIY dreamcatcher. Distillery flexitarian meditation laboris roof party. Cred raclette gastropub tilde PBR&B. Shoreditch poke adipisicing, reprehenderit lumbersexual succulents mustache officia franzen vinyl nostrud af. Hashtag bitters organic, before they sold out butcher cronut sapiente.")),
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return React.createElement(Component, null);
};
/* Empty With Image */
export const EmptyWithImage = (args) => {
const { EmptyStateWrapper, EmptyStateWrapper: { Title, Body }, } = DataTable;
const Component = createClass({
getInitialState() {
return {
data: [],
};
},
render() {
const { data } = this.state;
return (React.createElement(DataTable, { ...args, data: data, density: 'extended', isFullWidth: true },
React.createElement(EmptyStateWrapper, null,
React.createElement(Title, null, "No items found."),
React.createElement(Body, null,
React.createElement("img", { src: 'https://dummyimage.com/375x150/ff69/fff' }))),
React.createElement(DataTable.Column, { field: 'id', width: 41, align: 'center', hasBorderLeft: true, isSortable: true }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100, hasBorderLeft: true }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100, hasBorderLeft: true }, "Occupation")));
},
});
return React.createElement(Component, null);
};
/* Empty With Anchored Message */
export const EmptyWithAnchoredMessage = (args) => {
const Component = createClass({
getInitialState() {
return {
activeIndex: 1,
data: [],
};
},
render() {
const { activeIndex, data } = this.state;
return (React.createElement(DataTable, { ...args, data: map(data, (row, index) => index === activeIndex ? { ...row, isActive: true } : row), density: 'extended', isFullWidth: true, anchorMessage: true, minRows: 15 },
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return React.createElement(Component, null);
};
/* Loading */
export const Loading = (args) => {
const Component = createClass({
render() {
return (React.createElement(DataTable, { ...args, minRows: 50, anchorMessage: true, isFullWidth: true, isLoading: true, data: [] },
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return React.createElement(Component, null);
};
/* Loading With Anchored Message */
export const LoadingWithAnchoredMessage = (args) => {
const Component = createClass({
render() {
return (React.createElement(DataTable, { ...args, minRows: 15, anchorMessage: true, isFullWidth: true, isLoading: true, data: [] },
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'center' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return React.createElement(Component, null);
};
/* Min Rows */
export const MinRows = (args) => {
const data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
];
const Component = createClass({
getInitialState() {
return {
activeIndex: 1,
data,
};
},
render() {
const { activeIndex, data } = this.state;
return (React.createElement(DataTable, { ...args, data: map(data, (row, index) => index === activeIndex ? { ...row, isActive: true } : row), density: 'extended', isSelectable: true, isActionable: true, isFullWidth: true, minRows: 7 },
React.createElement(DataTable.Column, { field: 'id' }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100 }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100 }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
});
return React.createElement(Component, null);
};
/* Fixed Headers */
export const FixedHeaders = () => {
const data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
isSelected: true,
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
isActive: true,
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
];
const Component = createClass({
getInitialState() {
return {
hasFixedHeader: true,
isSelectable: true,
hasLightHeader: false,
fixedColumnCount: 2,
fixedRowHeight: 50,
isActionable: false,
};
},
handleToggle(stateItem) {
this.setState({ [stateItem]: !this.state[stateItem] });
},
handleNumeric(stateItem, value) {
this.setState({ [stateItem]: value });
},
renderDataTable(props) {
return (React.createElement(DataTable, { data: data, ...props },
React.createElement(DataTable.Column, { field: 'id', align: 'left', width: 35 }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left', width: 900 }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100 }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100 }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
render() {
return (React.createElement("div", null,
React.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
React.createElement(TextField, { style: { marginRight: 9, width: 45 }, onChangeDebounced: (v) => this.handleNumeric('fixedColumnCount', parseInt(v, 10)), placeholder: 'fixedColumnCount', value: this.state.fixedColumnCount }),
"fixedColumnCount"),
React.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
React.createElement(TextField, { style: { marginRight: 9, width: 45 }, onChangeDebounced: (v) => this.handleNumeric('fixedRowHeight', parseInt(v, 10)), placeholder: 'fixedRowHeight', value: this.state.fixedRowHeight }),
"fixedRowHeight"),
React.createElement(CheckboxLabeled, { Label: 'hasFixedHeader', isSelected: this.state.hasFixedHeader, onSelect: () => this.handleToggle('hasFixedHeader') }),
React.createElement(CheckboxLabeled, { Label: 'isSelectable', isSelected: this.state.isSelectable, onSelect: () => this.handleToggle('isSelectable') }),
React.createElement(CheckboxLabeled, { Label: 'hasLightHeader', isSelected: this.state.hasLightHeader, onSelect: () => this.handleToggle('hasLightHeader') }),
React.createElement(CheckboxLabeled, { Label: 'isActionable', isSelected: this.state.isActionable, onSelect: () => this.handleToggle('isActionable') }),
React.createElement("div", { style: { height: '200px' } }, this.renderDataTable(this.state))));
},
});
return React.createElement(Component, null);
};
/* Resizable Fixed Headers Table */
export const ResizableFixedHeadersTable = () => {
const data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
isSelected: true,
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
isActive: true,
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
];
const Component = createClass({
getInitialState() {
return {
hasFixedHeader: true,
isSelectable: true,
hasLightHeader: false,
fixedColumnCount: 2,
fixedRowHeight: 50,
isActionable: false,
};
},
handleToggle(stateItem) {
this.setState((prevState) => ({
[stateItem]: !prevState[stateItem],
}));
},
handleNumeric(stateItem, value) {
this.setState({ [stateItem]: value });
},
onChangeFixedColumnCount(prarm) {
this.handleNumeric('fixedColumnCount', parseInt(prarm, 10));
},
onChangeFixedRowHeight(prarm) {
this.handleNumeric('fixedRowHeight', parseInt(prarm, 10));
},
renderDataTable(props) {
return (React.createElement(DataTable, { data: data, ...props },
React.createElement(DataTable.Column, { field: 'id', align: 'left', width: 35, isResizable: true }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100, isResizable: true }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, isResizable: true }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left', width: 900, isResizable: true }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, isResizable: true }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, isResizable: true }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, isResizable: true }, "Status")));
},
render() {
return (React.createElement("div", null,
React.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
React.createElement(TextField, { style: { marginRight: 9, width: 45 }, onChange: (v) => this.onChangeFixedColumnCount(v), placeholder: 'fixedColumnCount', value: this.state.fixedColumnCount }),
"fixedColumnCount"),
React.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
React.createElement(TextField, { style: { marginRight: 9, width: 45 }, onChange: (v) => this.onChangeFixedRowHeight(v), placeholder: 'fixedRowHeight', value: this.state.fixedRowHeight }),
"fixedRowHeight"),
React.createElement(CheckboxLabeled, { Label: 'hasFixedHeader', isSelected: this.state.hasFixedHeader, onSelect: () => this.handleToggle('hasFixedHeader') }),
React.createElement(CheckboxLabeled, { Label: 'isSelectable', isSelected: this.state.isSelectable, onSelect: () => this.handleToggle('isSelectable') }),
React.createElement(CheckboxLabeled, { Label: 'hasLightHeader', isSelected: this.state.hasLightHeader, onSelect: () => this.handleToggle('hasLightHeader') }),
React.createElement(CheckboxLabeled, { Label: 'isActionable', isSelected: this.state.isActionable, onSelect: () => this.handleToggle('isActionable') }),
React.createElement("div", { style: { height: '200px' } }, this.renderDataTable(this.state))));
},
});
return React.createElement(Component, null);
};
/* Truncate Content */
export const TruncateContent = () => {
const data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist mathematician',
salary: '$100.01',
status: React.createElement(SuccessIcon, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
];
const Component = createClass({
render() {
return (React.createElement(DataTable, { data: data, hasFixedHeader: true, truncateContent: true },
React.createElement(DataTable.Column, { field: 'id', align: 'left', width: 50 }, "ID"),
React.createElement(DataTable.Column, { field: 'first_name', align: 'left', width: 100 }, "First"),
React.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left' }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100 }, "Long Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 90 }, "Large Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
});
return React.createElement(Component, null);
};
//# sourceMappingURL=DataTable.stories.js.map