paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve DataTable

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-11 09:37:20 +02:00
parent 04c054c8bf
commit 0e654bf4b6
10 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/quiet-rockets-throw.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Add new DataTable component.
packages/canon/css/components.css
+7 -3
View File
@@ -100,7 +100,7 @@
display: flex;
}
.canon-TablePagination {
.canon-DataTablePagination {
padding-top: var(--canon-space-3);
border-top: 1px solid var(--canon-border);
justify-content: space-between;
@@ -108,19 +108,23 @@
display: flex;
}
.canon-TablePagination--left {
.canon-DataTablePagination--left {
justify-content: space-between;
align-items: center;
display: flex;
}
.canon-TablePagination--right {
.canon-DataTablePagination--right {
justify-content: space-between;
align-items: center;
gap: var(--canon-space-2);
display: flex;
}
.canon-DataTablePagination--select {
min-width: 168px;
}
.canon-Flex {
display: flex;
}
packages/canon/css/datatable.css
+7 -3
View File
@@ -1,4 +1,4 @@
.canon-TablePagination {
.canon-DataTablePagination {
padding-top: var(--canon-space-3);
border-top: 1px solid var(--canon-border);
justify-content: space-between;
@@ -6,15 +6,19 @@
display: flex;
}
.canon-TablePagination--left {
.canon-DataTablePagination--left {
justify-content: space-between;
align-items: center;
display: flex;
}
.canon-TablePagination--right {
.canon-DataTablePagination--right {
justify-content: space-between;
align-items: center;
gap: var(--canon-space-2);
display: flex;
}
.canon-DataTablePagination--select {
min-width: 168px;
}
packages/canon/css/styles.css
+7 -3
View File
@@ -9324,7 +9324,7 @@
display: flex;
}
.canon-TablePagination {
.canon-DataTablePagination {
padding-top: var(--canon-space-3);
border-top: 1px solid var(--canon-border);
justify-content: space-between;
@@ -9332,19 +9332,23 @@
display: flex;
}
.canon-TablePagination--left {
.canon-DataTablePagination--left {
justify-content: space-between;
align-items: center;
display: flex;
}
.canon-TablePagination--right {
.canon-DataTablePagination--right {
justify-content: space-between;
align-items: center;
gap: var(--canon-space-2);
display: flex;
}
.canon-DataTablePagination--select {
min-width: 168px;
}
.canon-Flex {
display: flex;
}
packages/canon/src/components/DataTable/DataTable.stories.tsx
+2 -2
View File
@@ -16,7 +16,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import { DataTable } from '.';
import { data, Component } from './mocked-components';
import { data, DataProps } from './mocked-components';
import { columns } from './mocked-columns';
import {
flexRender,
@@ -34,7 +34,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => {
const table = useReactTable<Component>({
const table = useReactTable<DataProps>({
data,
columns,
getCoreRowModel: getCoreRowModel(),
packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import {
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table';
import { data, Component } from '../mocked-components';
import { data, DataProps } from '../mocked-components';
import { columns } from '../mocked-columns';
import { DataTable } from '../DataTable';
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => {
const table = useReactTable<Component>({
const table = useReactTable<DataProps>({
data,
columns,
getCoreRowModel: getCoreRowModel(),
packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
+7 -3
View File
@@ -1,4 +1,4 @@
.canon-TablePagination {
.canon-DataTablePagination {
display: flex;
align-items: center;
justify-content: space-between;
@@ -6,15 +6,19 @@
border-top: 1px solid var(--canon-border);
}
.canon-TablePagination--left {
.canon-DataTablePagination--left {
display: flex;
align-items: center;
justify-content: space-between;
}
.canon-TablePagination--right {
.canon-DataTablePagination--right {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--canon-space-2);
}
.canon-DataTablePagination--select {
min-width: 168px;
}
packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+4 -3
View File
@@ -36,10 +36,10 @@ const DataTablePagination = forwardRef(
return (
<div
ref={ref}
className={clsx('canon-TablePagination', className)}
className={clsx('canon-DataTablePagination', className)}
{...rest}
>
<div className="canon-TablePagination--left">
<div className="canon-DataTablePagination--left">
<Select
name="pageSize"
size="small"
@@ -55,9 +55,10 @@ const DataTablePagination = forwardRef(
onValueChange={value => {
table?.setPageSize(Number(value));
}}
className="canon-DataTablePagination--select"
/>
</div>
<div className="canon-TablePagination--right">
<div className="canon-DataTablePagination--right">
<Text variant="body">{`${(pageIndex ?? 0) * (pageSize ?? 10) + 1} - ${
((pageIndex ?? 0) + 1) * (pageSize ?? 10)
} of ${table?.getRowCount()}`}</Text>
packages/canon/src/components/DataTable/mocked-columns.tsx
+2 -2
View File
@@ -15,11 +15,11 @@
*/
import { ColumnDef } from '@tanstack/react-table';
import { Component } from './mocked-components';
import { DataProps } from './mocked-components';
import { Checkbox } from '../Checkbox';
import { Text } from '../Text';
export const columns: ColumnDef<Component>[] = [
export const columns: ColumnDef<DataProps>[] = [
{
id: 'select',
header: ({ table }) => (
packages/canon/src/components/DataTable/mocked-components.ts
+2 -2
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface Component {
export interface DataProps {
name: string;
owner: string;
type: 'documentation' | 'library' | 'service' | 'website' | 'other';
@@ -21,7 +21,7 @@ export interface Component {
tags?: string[];
}
export const data: Component[] = [
export const data: DataProps[] = [
{
name: 'authentication-and-authorization-service',
owner: 'security-team',