Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: added support for loaders / spinners in table component. (#15683)

Browse Source 
* feat: added loader/spinner support for table

* added empty data state in table

* updated no data UI for table

Co-authored-by: Ankita Kinger <ankita@appsmith.com>
This commit is contained in:
Sangeeth Sivan 2022-08-16 16:48:12 +05:30 committed by GitHub
parent 50014eef78
commit 5e2e701220
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 83 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
app/client/src/components/ads/Table.tsx
View File

@ -4,6 +4,9 @@ import styled from "styled-components";
import { ReactComponent as DownArrow } from "assets/icons/ads/down_arrow.svg";
import { ReactComponent as UpperArrow } from "assets/icons/ads/upper_arrow.svg";
import { Classes } from "./common";
import Spinner from "./Spinner";
import { IconSize } from "./Icon";
import EmptyDataState from "components/utils/EmptyDataState";
const Styles = styled.div`
table {
@ -45,11 +48,6 @@ const Styles = styled.div`
tbody {
tr {
td:first-child {
color: ${(props) => props.theme.colors.table.rowTitle};
font-weight: ${(props) => props.theme.fontWeights[1]};
}
td {
padding: ${(props) => props.theme.spaces[4]}px
${(props) => props.theme.spaces[9]}px;
@ -60,6 +58,19 @@ const Styles = styled.div`
props.theme.typography.p1.letterSpacing}px;
font-weight: normal;
border-bottom: 1px solid ${(props) => props.theme.colors.table.border};
&:first-child {
color: ${(props) => props.theme.colors.table.rowTitle};
font-weight: ${(props) => props.theme.fontWeights[1]};
}
&.no-border {
border: none;
.no-data-title {
color: ${(props) => props.theme.colors.table.rowData};
}
}
}
&:hover {
@ -69,11 +80,16 @@ const Styles = styled.div`
fill: ${(props) => props.theme.colors.table.hover.rowTitle};
}
}
td:first-child {
color: ${(props) => props.theme.colors.table.hover.rowTitle};
}
td {
color: ${(props) => props.theme.colors.table.hover.rowData};
&:first-child {
color: ${(props) => props.theme.colors.table.hover.rowTitle};
}
&.no-border {
background-color: var(--appsmith-color-black-0);
}
}
}
}
@ -84,13 +100,31 @@ const Styles = styled.div`
const HiddenArrow = styled(DownArrow)`
visibility: hidden;
`;
const CentralizedWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 250px;
`;
export interface TableProps {
data: any[];
columns: any[];
isLoading?: boolean;
loaderComponent?: JSX.Element;
noDataComponent?: JSX.Element;
}
function Table(props: TableProps) {
const { columns, data } = props;
const {
columns,
data,
isLoading = false,
loaderComponent,
noDataComponent,
} = props;
const {
getTableBodyProps,
@ -127,24 +161,46 @@ function Table(props: TableProps) {
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, index) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} key={index}>
{row.cells.map((cell, index) => {
return (
<td
{...cell.getCellProps()}
data-colindex={index}
key={index}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
{isLoading ? (
<tr>
<td className="no-border" colSpan={columns?.length}>
<CentralizedWrapper>
{loaderComponent ? (
loaderComponent
) : (
<Spinner size={IconSize.XXL} />
)}
</CentralizedWrapper>
</td>
</tr>
) : rows.length > 0 ? (
rows.map((row, index) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} key={index}>
{row.cells.map((cell, index) => {
return (
<td
{...cell.getCellProps()}
data-colindex={index}
key={index}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})
) : (
<tr>
<td className="no-border" colSpan={columns?.length}>
<CentralizedWrapper>
{noDataComponent ? noDataComponent : <EmptyDataState />}
</CentralizedWrapper>
</td>
</tr>
)}
</tbody>
</table>
</Styles>