good day everyone Welcome to our quick
demo of feeds table Pro let's dive into
what feeds table Pro is all about feeds
table Pro is a stack that lets you take
data from feeds and display it in an
HTML table while it's essentially an
HTML table stack its true power comes
when you connect it to data sources via
Weaver space's feed stack feeds by
Weaver space allows you to connect to
multiple data sources like CSV RSS Json
or total CMS right out of the box with
additional database packs you can even
connect to myql Maria DB sqlite in SQL
Server
databases I created feeds table Pro to
provide a clean customizable interface
for displaying data you can customize
column names manage data and add simple
sorting and searching
capabilities let's start by setting up a
simple HTML table drag feeds table Pro
to your page you'll see it comes with a
header row cell here you can add headers
like name
name
date age and favorite
color now let's add some rows to the
table for now we're not going to connect
any feeds instead we'll manually add a
row and fill in some
data once we preview it you'll see we
have a simple table with a header and
one row of
data let's duplicate the row and change
some of the data to have a demo
table here you can see we've added some
table data manually this data isn't
connected to any feeds it's been entered
manually while this approach isn't ideal
for larger data sets it's one use case
for feeds table Pro feeds table Pro also
supports search and sort
functionality by enabling these features
you can sort by any data in the columns
let's add the feeds table Pro search
stack to the page right from the start
it's important to note that feeds table
Pro assigns a table ID to each table and
the search stack also has a
corresponding table ID you can have
multiple tables on a page but each one
must have a unique ID a search field
will only work with the table that
shares its ID
for example if the table ID is seven the
search stack should also have an ID of
seven now let's preview the
data now we have a search feature what's
great about it is that you can enter
multiple search queries and it searches
instantly for example if you search
Joshua the results appear immediately if
you then search for July it filters the
entries to show only those from July you
can even search John to narrow it down
further you can sort by
name and feeds table Pro also supports
sorting by date it automatically detects
date fields and arranges them in
calendar
order and of course you can arrange by
numbers as
well if you arrange the color column
it'll be back to alphabetical
now let's load some Dynamic data by
adding a feed
stack we will then add a row into the
feed stack Drop Zone
area I am just going to steal this CSV
data source with some demo data in it
ready to
use then let's remove these headers and
add the headers from the CSV header Row
in the demo data
next we need to add six
cells the feeds macros use double curly
braces around the column ID like
this we've set up the headers and Define
the macros if you've used feeds before
this will be familiar these macros will
connect the data from the database into
this
row now let's take a look at our data
perfect as you can see we now have a
table populated with data we can sort by
dates salary email country age and name
currently we can't sort the data by last
name only by first name however with the
power of feeds and feeds table Pro we
can make some changes to enable that
we'll explore that shortly the search
function is excellent for example if you
want to search by age you can type in 37
to see all the 37 year olds if you
search by country like UK it will
display relevant Eng R note that it also
searches within other data points like
2022 and it will filter that out from
the date column even after filtering
your data through a search you can still
sort the remaining rows by the data
that's
left to bring back the data simply clear
the search field or reload the page now
let's look at formatting the data we
want to format currency and split the
first and last names into separate
columns using the power of twig and
feeds we can customize how this data is
displayed in feeds table Pro first we'll
create a second header cell so that we
have separate columns for first name and
last name now I'm going to copy a
pre-made twig statement to speed up the
process this statement takes the data
from the name column and splits it into
separate first name and last name
columns next we'll update the macro in
the first row cell to first name then
duplicate this cell to create a last
name cell when we preview the table
you'll see that the first name and last
name have been split from the original
data in the the database it's still a
single field but with feeds and feeds
table Pro we've separated them into
individual columns now you can sort by
both last name and first name making
this a powerful way to display and
organize your data next let's format the
salary I'll use a pre-made macro from
another screen this macro adds a dollar
sign before the salary value and then
formats the number as currency using
twig let's see how that looks now
originally the table contained raw
numeric data but with twig we formatted
it directly within the table this shows
how we can manipulate data outside of
the database which is a major advantage
of using feeds the beauty of feeds table
Pro is that it can still sort and search
this formatted data for example you can
search for a specific amount like
$50,000 or filter data by years such as
2021 2022 2023 or 2024 now let's explore
some additional features available to
you
as we review the table we notice that
the first name and last name columns
have more space than needed to optimize
this we can adjust the column widths
here's how we do it we'll add a column
width setting since we're only adjusting
the first name and last name columns we
only need to modify the first two
columns we'll change the width from Auto
to a specific value let's start with 150
pixels after previewing we can fine-tune
it if 100 pixels is too small we'll try
100 110 pixels which is almost perfect
we'll continue adjusting until it looks
just right once the first name column is
set we'll do the same for the last name
column setting it to 115
pixels now that we've set the width for
the last name column let's consider
making the date column narrower as well
the date is in column 7 so we need to
adjust that specific column while
leaving the others set to Auto we'll
start by setting the width to 200 pixels
but that's too wide so we'll try 100
pixels that's a bit too small so let's
adjust it to 120 pixels perfect 120
looks just
right if we set the preview window to
manual adjustment and start collapsing
the table you'll notice that the data
begins to line break which disrupts our
rows we can prevent this by setting a
minimum width for the table for example
around 877 pixels is where the table
starts to break so we'll set the minimum
width to 87 70 pixels after applying
this setting in feeds table Pro the
table maintains its structure and
doesn't break even when the window is
resized what's really cool is that the
data becomes scrollable within the table
itself if you scroll down you'll see a
scroll bar but the search bar at the top
remains unaffected you're only scrolling
within the table this feature ensures
that your data and table layout look
good on smaller devices it also means
you can still use the search and filter
functions effectively on mobile devices
if you're a foundation 6 user you have
the ability to stylize your table using
table styles to do this we'll apply a
parent class to The Container which
we'll call styles from here we can use
the Swatch to adjust everything from the
table header and body settings to text
size and more for instance if you want
to make the text smaller you can easily
do
that you can also adjust the header text
size or change the text weight to bold
this flexibility allows you to create
smaller tables with smaller text if
needed Additionally you can fully
customize the table's background in
other Style Elements while my example
may be a bit extreme it demonstrates the
range of customization options available
overall feeds table Pro is a powerful
stack that gives you extensive control
over how you format and present your
data there are also alignment settings
for header rows body rows header cells
and row cells use these settings as
needed to create beautifully customized
tables for your Web projects with these
simple yet powerful features feeds table
Pro combined with the power of feeds
enables you to display sort and search
your database data quickly cleanly and
efficiently thank you for watching this
video I hope you'll consider picking up
feeds table Pro today to power your next
database table
n
[Music]