table and pagination on mobile

nemanjam · Dec 6, 2024 · 21f3f46 · 21f3f46
1 parent 6c756ac
commit 21f3f46
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/components/charts/bar-chart-simple.tsx b/components/charts/bar-chart-simple.tsx
@@ -96,7 +96,7 @@ const BarChartSimple: FC<Props> = ({ chartData, allMonths, month }) => {
 
   return (
     <Card className="self-start">
-      <CardHeader className="flex flex-row justify-between gap-4">
+      <CardHeader className="flex flex-col xs:flex-row justify-between gap-4">
         <div className="space-y-2">
           <CardTitle>Companies by ads</CardTitle>
           <CardDescription>in the previous 12 months</CardDescription>

diff --git a/components/companies-comments-table.tsx b/components/companies-comments-table.tsx
@@ -26,6 +26,7 @@ import {
 } from '@/components/ui/table';
 import { columns, CompanyTable } from '@/components/companies-comments-columns';
 
+import { cn } from '@/utils/styles';
 import { getThreadOrCommentUrlFromId } from '@/utils/urls';
 
 import { DbMonth } from '@/types/database';
@@ -64,7 +65,7 @@ const CompaniesCommentsTable: FC<Props> = ({ tableData }) => {
 
   return (
     <div className="rounded-lg border bg-card">
-      <div className="flex justify-between items-center p-4">
+      <div className="flex justify-between items-center gap-4 p-4">
         <Input
           placeholder="Filter companies..."
           value={(table.getColumn('companyName')?.getFilterValue() as string) ?? ''}
@@ -84,9 +85,16 @@ const CompaniesCommentsTable: FC<Props> = ({ tableData }) => {
         <TableHeader className="block md:table-header-group">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="block md:table-row">
-              {headerGroup.headers.map((header) => {
+              {headerGroup.headers.map((header, index) => {
                 return (
-                  <TableHead key={header.id}>
+                  <TableHead
+                    key={header.id}
+                    className={cn({
+                      'xs:w-40': index === 0,
+                      'xs:w-32': index === 1,
+                      'hidden xs:table-cell': index === 2,
+                    })}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(header.column.columnDef.header, header.getContext())}
@@ -104,11 +112,16 @@ const CompaniesCommentsTable: FC<Props> = ({ tableData }) => {
                 data-state={row.getIsSelected() && 'selected'}
                 className="block md:table-row"
               >
-                {row.getVisibleCells().map((cell) => {
+                {row.getVisibleCells().map((cell, index) => {
                   return (
                     <TableCell
                       key={cell.id}
-                      className="align-top block md:table-cell py-3 first:pt-4 last:pb-4 md:py-4"
+                      className={cn(
+                        'align-top block md:table-cell py-3 first:pt-4 last:pb-4 md:py-4',
+                        {
+                          'md:text-center': index === 1,
+                        }
+                      )}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>

diff --git a/components/ui/data-table-pagination.tsx b/components/ui/data-table-pagination.tsx
@@ -17,12 +17,12 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
+      <div className="hidden sm:block flex-1 text-sm text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length} of{' '}
         {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
-      <div className="flex items-center space-x-6 lg:space-x-8">
-        <div className="flex items-center space-x-2">
+      <div className="flex justify-between sm:justify-start flex-1 sm:flex-initial items-center space-x-6 lg:space-x-8">
+        <div className="hidden xs:flex items-center space-x-2">
           <p className="text-sm font-medium">Rows per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}