Skip to content

Commit

Permalink
feat: add right align to the statistics table
Browse files Browse the repository at this point in the history
  • Loading branch information
@theodorusclarence
theodorusclarence committed Jan 13, 2022
1 parent 1543e22 commit 47e6322
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 12 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ module.exports = {
'no-console': 'warn',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'react/no-unescaped-entities': 'off',
'react/display-name': 'off',

// Sort
'simple-import-sort/exports': 'warn',
Expand Down
26 changes: 22 additions & 4 deletions src/components/ReactTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,16 @@ export default function ReactTable<T extends object>({
scope='col'
className='group px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-200'
>
<div className='flex relative gap-4 items-center py-1'>
<div
className={clsx(
'flex relative gap-4 items-center py-1',
// Align Additional
{
'justify-center': column.align === 'center',
'flex-row-reverse': column.align === 'right',
}
)}
>
<p>{column.render('Header')}</p>
<span className='flex flex-col justify-center items-center'>
<GoTriangleUp
Expand All @@ -113,7 +122,9 @@ export default function ReactTable<T extends object>({
: // sorted asc
'text-gray-700 dark:text-gray-200'
: // not sorted
'group-hover:text-gray-400 text-transparent'
column.disableSortBy
? 'text-transparent'
: 'group-hover:text-gray-400 text-transparent'
)}
/>
<GoTriangleDown
Expand All @@ -126,7 +137,9 @@ export default function ReactTable<T extends object>({
: // sorted asc
'text-gray-400 dark:text-gray-500'
: // not sorted
'group-hover:text-gray-400 text-transparent'
column.disableSortBy
? 'text-transparent'
: 'group-hover:text-gray-400 text-transparent'
)}
/>
</span>
Expand Down Expand Up @@ -181,7 +194,12 @@ export default function ReactTable<T extends object>({
<td
{...column.getFooterProps()}
className={clsx(
'px-6 py-3 text-sm font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-200'
'px-6 py-3 text-sm font-medium tracking-wider text-gray-500 uppercase dark:text-gray-200',
{
'text-left': column.align === 'left',
'text-center': column.align === 'center',
'text-right': column.align === 'right',
}
)}
key={column.id}
>
Expand Down
40 changes: 32 additions & 8 deletions src/pages/statistics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ export default function StatisticsPage() {
{
Header: 'Total Views',
accessor: 'views',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.views, 0),
Expand All @@ -46,7 +49,10 @@ export default function StatisticsPage() {
{
Header: 'Web Views',
accessor: 'webViews',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.webViews, 0),
Expand All @@ -57,7 +63,10 @@ export default function StatisticsPage() {
{
Header: 'Dev.to',
accessor: 'devtoViews',
Cell: ({ value }) => value?.toLocaleString() || '-',
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value?.toLocaleString() || '-'}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() =>
Expand All @@ -72,7 +81,10 @@ export default function StatisticsPage() {
{
Header: 'Likes',
accessor: 'likes',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.likes, 0),
Expand All @@ -98,7 +110,10 @@ export default function StatisticsPage() {
{
Header: 'Total Views',
accessor: 'views',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.views, 0),
Expand All @@ -109,7 +124,10 @@ export default function StatisticsPage() {
{
Header: 'Likes',
accessor: 'likes',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.likes, 0),
Expand All @@ -135,7 +153,10 @@ export default function StatisticsPage() {
{
Header: 'Total Views',
accessor: 'views',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.views, 0),
Expand All @@ -146,7 +167,10 @@ export default function StatisticsPage() {
{
Header: 'Likes',
accessor: 'likes',
Cell: ({ value }) => value.toLocaleString(),
align: 'right',
Cell: ({ value }) => (
<p className='text-right'>{value.toLocaleString()}</p>
),
Footer: ({ rows }) =>
React.useMemo(
() => rows.reduce((sum, row) => sum + row.original.likes, 0),
Expand Down

0 comments on commit 47e6322

Please sign in to comment.