Merge pull request #266 from duyet/chore/ui

chore(ui): update table footer to use "footnote" variable for metadata

Author: duyet

app/[query]/table.tsx

@@ -69,12 +69,14 @@ export default async function Table({
       },
     })
 
+    const footerText = `${metadata.rows} row(s) in ${metadata.duration} seconds.`
+
     return (
       <DataTable
         title={title}
         config={config}
         data={data}
-        footer={`${metadata.rows} row(s) in ${metadata.duration} seconds.`}
+        footnote={footerText}
       />
     )
   } catch (error) {

components/data-table/data-table.cy.tsx

@@ -227,33 +227,33 @@ describe('<DataTable />', () => {
     cy.get('pre').should('not.exist')
   })
 
-  it('should display with footer prop as text', () => {
+  it('should display with footnote prop as text', () => {
     cy.mount(
       <DataTable
         title="Test Table"
         config={config}
         data={[]}
-        footer="This is footer"
+        footnote="This is footnote"
       />
     )
 
-    cy.get('div').contains('This is footer')
+    cy.get('div').contains('This is footnote')
   })
 
-  it('should display with footer prop as elemenent', () => {
+  it('should display with footnote prop as elemenent', () => {
     cy.mount(
       <DataTable
         title="Test Table"
         config={config}
         data={[]}
-        footer={<div className="footer">This is footer</div>}
+        footnote={<div className="footnote">This is footnote</div>}
       />
     )
 
-    cy.get('.footer').contains('This is footer').should('exist')
+    cy.get('.footnote').contains('This is footnote').should('exist')
   })
 
-  it('should display without footer props, with 1 row, pageSize=10', () => {
+  it('should display without footnote props, with 1 row, pageSize=10', () => {
     cy.mount(
       <DataTable
         config={config}
@@ -266,7 +266,7 @@ describe('<DataTable />', () => {
     cy.get('[aria-label="Pagination"]').should('is.not.visible')
   })
 
-  it('should display without footer, with 10 row, pageSize=10', () => {
+  it('should display without footnote, with 10 row, pageSize=10', () => {
     const data = []
     for (let i = 0; i < 10; i++) {
       data.push({ col1: '1', col2: '2' })

components/data-table/data-table.tsx

@@ -33,6 +33,7 @@ import { uniq } from '@/lib/utils'
 import { ColumnVisibilityButton } from './buttons/column-visibility'
 import { ShowSQLButton } from './buttons/show-sql'
 import { DataTableToolbar } from './data-table-toolbar'
+import { Footnote, type FootnoteProps } from './footnote'
 
 interface DataTableProps<TData extends RowData> {
   title?: string
@@ -43,7 +44,7 @@ interface DataTableProps<TData extends RowData> {
   data: TData[]
   defaultPageSize?: number
   showSQL?: boolean
-  footer?: string | React.ReactNode
+  footnote?: FootnoteProps<TData>['footnote']
 }
 
 export function DataTable<TData extends RowData, TValue>({
@@ -55,7 +56,7 @@ export function DataTable<TData extends RowData, TValue>({
   data,
   defaultPageSize = 100,
   showSQL = true,
-  footer,
+  footnote,
 }: DataTableProps<TData>) {
   // Columns available in the data, normalized
   const allColumns: string[] = uniq(
@@ -185,16 +186,7 @@ export function DataTable<TData extends RowData, TValue>({
       </div>
 
       <div className="flex items-center justify-between px-2">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {footer ? (
-            footer
-          ) : (
-            <>
-              {table.getFilteredSelectedRowModel().rows.length} of{' '}
-              {table.getFilteredRowModel().rows.length} row(s) selected.
-            </>
-          )}
-        </div>
+        <Footnote table={table} footnote={footnote} />
         <DataTablePagination table={table} />
       </div>
     </div>

components/data-table/footnote.tsx

@@ -0,0 +1,21 @@
+import type { Table } from '@tanstack/react-table'
+
+export interface FootnoteProps<TData> {
+  table: Table<TData>
+  footnote?: string | React.ReactNode
+}
+
+export function Footnote<TData>({ table, footnote }: FootnoteProps<TData>) {
+  return (
+    <div className="flex-1 text-sm text-muted-foreground">
+      {footnote ? (
+        footnote
+      ) : (
+        <>
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </>
+      )}
+    </div>
+  )
+}

components/data-table/pagination.tsx

@@ -4,7 +4,7 @@ import {
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
-import { Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 
 import { Button } from '@/components/ui/button'
 import {