glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
679 lines (663 loc) • 14.2 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { Table } from "../../lib/components/table/Table";
import { Text } from "../../lib/components/text/Text";
export default {
title: "Components/Table",
component: Table,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component:
"The Table component is used to display data in a tabular format, making it easy to organize and present large sets of data. It supports features like sorting, custom styling, action handling, and loading states. The component is highly customizable, allowing users to define columns, provide data, and manage various interactive elements within the table.",
},
},
},
argTypes: {
columns: {
control: "",
description: "An array of objects defining the columns of the table.",
},
data: {
control: "",
description:
" An array of data objects to be displayed in the table rows.",
},
sortHandler: {
control: "",
description:
"Function to handle sorting when a column header is clicked.",
},
sortItem: {
control: "",
description: "The key of the current column being sorted.",
},
sortOrder: {
control: "",
description: "The order of sorting, which can be asc or desc.",
},
tableRowStyles: {
control: "",
description: "Additional CSS styles to apply to the table rows.",
},
tableHeaderStyle: {
control: "",
description: "Additional CSS styles to apply to the table header.",
},
linkHandler: {
control: "",
description: "Function to handle link clicks within the table.",
},
actionHandler: {
control: "",
description:
" Function to handle actions, such as button clicks, within the table.",
},
style: {
control: "",
description: "Additional CSS styles to apply to the entire table.",
},
loading: {
control: "",
description:
"A boolean indicating whether the table is in a loading state.",
},
chipStyle: {
control: "",
description:
"Additional CSS styles to apply to any chip elements within the table.",
},
progressCircleStyle: {
control: "",
description:
"Additional CSS styles to apply to the progress circle element.",
},
progressCircleClass: {
control: "",
description:
"Additional CSS class names to apply to the progress circle element.",
},
progressCircleContainerClass: {
control: "",
description:
"Additional CSS class names to apply to the container of the progress circle element.",
},
message: {
control: "",
description:
" A message to display within the table, often used for no data.",
},
tableContainerStyle: {
control: "",
description: "Additional CSS styles to apply to the table container.",
},
containerClass: {
control: "",
description:
"Additional CSS class names to apply to the table container for custom styling.",
},
id: {
control: "",
description: "The unique identifier for the table element.",
},
name: {
control: "",
description: "The name attribute for the table element.",
},
key: {
control: "",
description:
"The key attribute for table rows, used for efficient rendering.",
},
noDataStyle: {
control: "",
description:
"Additional CSS styles to apply when there is no data to display in the table.",
},
children: { table: { disable: true } }, // Hide the 'children' property control
},
};
const Template = (args) => {
return (
<div style={{ height: "100px" }}>
<Table {...args} />
</div>
);
};
export const Default = Template.bind({});
Default.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
data: [
{
id: "550e8400-e29b-41d4",
name: "John Doe",
},
{
id: "680e8400-e29b-41d4",
name: "Jane Smith",
},
],
};
Default.parameters = {
docs: {
description: {
story: "This story demonstrates the Table component.",
},
},
};
export const Loading = Template.bind({});
Loading.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
data: [],
loading: true,
};
Loading.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with loading property.",
},
},
};
export const customTableRowStyles = Template.bind({});
customTableRowStyles.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
data: [
{
id: "550e8400-e29b-41d4",
name: "John Doe",
},
{
id: "680e8400-e29b-41d4",
name: "Jane Smith",
},
],
tableRowStyles: {
backgroundColor: "#4db6ac",
},
};
customTableRowStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom table row styles.",
},
},
};
export const customTableHeaderStyles = Template.bind({});
customTableHeaderStyles.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
data: [
{
id: "550e8400-e29b-41d4",
name: "John Doe",
},
{
id: "680e8400-e29b-41d4",
name: "Jane Smith",
},
],
tableHeaderStyle: {
backgroundColor: "#4db6ac",
},
};
customTableHeaderStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom table header styles.",
},
},
};
export const customStyles = Template.bind({});
customStyles.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
data: [
{
id: "550e8400-e29b-41d4",
name: "John Doe",
},
{
id: "680e8400-e29b-41d4",
name: "Jane Smith",
},
],
style: {
backgroundColor: "#4db6ac",
},
};
customStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom table styles.",
},
},
};
export const customProgressCircleStyles = Template.bind({});
customProgressCircleStyles.args = {
columns: [
{
label: "id",
fieldName: "id",
sort: true,
style: {
textAlign: "left",
},
},
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
],
loading: true,
progressCircleStyle: {
borderColor: "#4db6ac",
borderTop: "3px solid white",
},
};
customProgressCircleStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom progress circle styles.",
},
},
};
export const customChipStyles = Template.bind({});
customChipStyles.args = {
columns: [
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
{
label: "status",
sort: true,
style: {
textAlign: "left",
},
type: "chip",
chipOptions: [
{
value: "active",
backgroundColor: "#9dcb9f",
},
{ value: "inactive", backgroundColor: "#ff4e4e" },
],
},
],
data: [
{
name: "John Doe",
status: "active",
},
{
name: "Jane Smith",
status: "inactive",
},
],
chipStyle: {
border: "1px solid #4db6ac",
},
};
customChipStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom chip styles.",
},
},
};
export const customMessage = Template.bind({});
customMessage.args = {
columns: [
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
{
label: "status",
sort: true,
style: {
textAlign: "left",
},
type: "chip",
chipOptions: [
{
value: "active",
backgroundColor: "#9dcb9f",
},
{ value: "inactive", backgroundColor: "#ff4e4e" },
],
},
],
data: [],
message: "No Data Found.",
};
customMessage.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom message.",
},
},
};
export const customTableContainerStyle = Template.bind({});
customTableContainerStyle.args = {
columns: [
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
{
label: "status",
sort: true,
style: {
textAlign: "left",
},
type: "chip",
chipOptions: [
{
value: "active",
backgroundColor: "#9dcb9f",
},
{ value: "inactive", backgroundColor: "#ff4e4e" },
],
},
],
data: [
{
name: "John Doe",
status: "active",
},
{
name: "Jane Smith",
status: "inactive",
},
],
tableContainerStyle: {
backgroundColor: "#9dcb9f",
},
};
customTableContainerStyle.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom table container style.",
},
},
};
export const customNoDataStyles = Template.bind({});
customNoDataStyles.args = {
columns: [
{
label: "name",
fieldName: "name",
sort: true,
style: {
textAlign: "left",
},
customBodyRenderer: (rowItem, index) => {
return (
<Text
style={{
display: "flex",
justifyContent: "left",
alignItems: "center",
}}
>
{rowItem?.name}
</Text>
);
},
},
{
label: "status",
sort: true,
style: {
textAlign: "left",
},
type: "chip",
chipOptions: [
{
value: "active",
backgroundColor: "#9dcb9f",
},
{ value: "inactive", backgroundColor: "#ff4e4e" },
],
},
],
data: [],
message: "No Data Found.",
noDataStyle: {
fontWeight: "bold",
},
};
customNoDataStyles.parameters = {
docs: {
description: {
story:
"This example shows how to use Table component with custom no data styles.",
},
},
};